js 获取本地上传的文件（图片和视频）的宽高和大小

 选择的文件类型 e.target.files[0].type 值

/**
 * e.target.files[0].type的结果
 * .PSD 文件 ""
 * .psd 文件 ""
 * .pdf 文件 "application/pdf"
 * .PNG 文件 "image/png"
 * .png 文件 "image/png"
 * .JPEG 文件 "image/jpeg"
 * .jpg 文件 "image/jpeg"
 */

1. 不限制上传的图像或视频的格式：

/** 不限制上传的图像或视频的格式 */
<input type="file" accept="image/*" multiple />
<input type="file" accept="video/*" multiple />

2. 显示上传的文件类型在一定范围内：

/** 限制上传的文件类型在一定范围内 */
<input type="file" accept="image/png, image/jpeg" multiple />
<input type="file" accept="image/png, image/jpeg, video/mp4" multiple />

 

 

一、获取选择的本地的图片的宽高

/**
 * 上传图片
 * @param e 选择的文件对象
 * @param progressCallback 进度回调
 * @returns {Promise<any>}
 */
function uploadImageFile(e, progressCallback) {
    return new Promise(function (resolve, reject) {
        var fileObj = e.target.files[0];
        if (fileObj.type != "image/png" && fileObj.type != "image/jpeg") {
            console.log("请上传正确的文件类型");
            reject("");
        }
        if (fileObj.size > 5*1024*1024) {
            console.log("图片文件过大");
            reject("");
        }
        // 获取上传的图片的宽高
        var reader = new FileReader();
        reader.readAsDataURL(fileObj);
        reader.onload = function (evt) {
            var replaceSrc = evt.target.result;
            var imageObj = new Image();
            imageObj.src = replaceSrc;
            imageObj.onload = function () {
                console.log(imageObj.width + imageObj.height);
                // 执行上传的方法，获取外网路径，上传进度等
                resolve();
            };
        };
    });
}

二、获取上传的本地视频的宽高

/**
 * 上传视频
 * @param e 选择的文件对象
 * @param progressCallback 进度回调
 * @returns {Promise<any>}
 */
function uploadVideoFile(e, progressCallback) {
    return new Promise(function (resolve, reject) {
        var fileObj = e.target.files[0];
        if (fileObj.type !== "video/mp4") {
            console.log("请上传正确的文件类型");
            reject("");
        }
        if (fileObj.size > 200*1024*1024) {
            console.log("视频文件过大");
            reject("");
        }
        // 获取上传的视频的宽高
        var videoUrl = URL.createObjectURL(fileObj);
        var videoObj = document.createElement("video");
        videoObj.onloadedmetadata = function (evt) {
            URL.revokeObjectURL(videoUrl);
            console.log(videoObj.videoWidth + videoObj.videoHeight);
            // 执行上传的方法，获取外网路径，上传进度等
            resolve();
        };
        videoObj.src = videoUrl;
        videoObj.load();
    });
}

三、限制上传的PDF文件

/**
 * 上传PDF
 * @param e 选择的文件对象
 * @param progressCallback 进度回调
 * @returns {Promise<any>}
 */
function uploadPdfFile(e, progressCallback) {
    return new Promise(function (resolve, reject) {
        var fileObj = e.target.files[0];
        if (fileObj.type !== "application/pdf") {
            console.log("请上传正确的文件类型");
            reject("");
        }
        if (fileObj.size > 60*1024*1024) {
            console.log("PDF文件过大");
            reject("");
        }
        // 执行上传的方法，获取外网路径，上传进度等
        resolve();
    });
}

 

 

 

参考：

https://www.cnblogs.com/longzhongren/p/5715628.html

https://cloud.tencent.com/developer/ask/152114