5分鐘學會js上傳圖片校驗圖片格式、大小、尺寸寬高

                                    js上傳圖片校驗圖片格式、大小、尺寸寬高

 

一、前言

       js上傳圖片校驗圖片格式、大小、尺寸寬高。

       在此記錄下，分享給大家。

 

二、代碼

<input type="file" id="imgFile" name="imgFile"  onchange="checkImages(this, 2019, 1031, 'setImagePreview')" />

 

/**
 * 圖片上傳校驗
 * @param file
 * @param width
 * @param height
 * @param callBackMethod：回調方法
 * @author yys
 */
function checkImages(file, width, height, callBackMethod) {

    if(file.value){
        /**
         * 0、參數準備
         *      fileStream：文件流
         *      fileSize：文件大小
         *      fileName：文件名稱
         */
        var fileStream = file.files[0];
        var fileSize = fileStream.size;
        var fileName = fileStream.name;

        /**
         * 1、校驗圖片格式(png/jpg/git)
         */
        var reg = /\.(git|jpg|jpeg|png|GIF|JPG|PNG)$/;
        if(!reg.test(fileName)) {
            alert("圖片格式限制[png/jpg/jpeg/git]~~");
            return;
        }

        /**
         * 2、校驗圖片大小(2M)
         *      fileSize：單位(B)
         */
        if(fileSize / 1024 > 2048) {
            alert("圖片大小限制[2M]~~");
            return;
        }

        /**
         * 3、校驗圖片尺寸
         */
        var reader = new FileReader();
        reader.onload = function (e) {
            var data = e.target.result;
            // 加載圖片獲取圖片真實寬度和高度
            var image = new Image();
            image.onload = function() {
                var realWidth = image.width,
                    realHeight = image.height;
                if (width != realWidth || height != realHeight){
                    alert("圖片尺寸限制[" + width + "*" + height + "]，當前圖片尺寸爲[" + realWidth + "*" + realHeight + "]~~");
                    return;
                }else {
                    // 校驗通過 - 執行回調方法
                    // setImagePreview - 圖片預覽等後續操作
                    eval(callBackMethod)();
                    // eval(callBackMethod)(width, height);
                }
            };
            image.src = data;
        };
        reader.readAsDataURL(fileStream);
    }
}

 

 

                       Now ~ ~ ~寫到這裏，就寫完了，如果有幸幫助到你，請記得關注我，共同一起見證我們的成長。