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