5分钟学会js上传图片校验图片格式、大小、尺寸宽高

                                    js上传图片校验图片格式、大小、尺寸宽高

一、前言

       js上传图片校验图片格式、大小、尺寸宽高。

       在此记录下，分享给大家。

二、代码

<input type="file" id="imgFile" name="imgFile"  οnchange="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 ~ ~ ~写到这里，就写完了，如果有幸帮助到你，请记得关注我，共同一起见证我们的成长。