上传图片限制大小、类型判断、像素判断

大小限制、类型判断、像素判断

在项目中经常用到input标签来上传文件，而这些文件通常是图片文件。图片有很多格式我们只需要其中的几种，就需要对用户上传的文件进行验证，在HTML5中有一个新的属性：accept 文件类型限制。但是通常我们会用 javascript 或 jQuery 编写方法进行验证图片的大小限制、类型判断、像素判断。

<input type="file" id="file" οnchange="_selectUploadPic">

图片类型验证

function _selectUploadPic(ev) {
    var fileTypes = [".jpg", ".png"]  // 图片限制的格式类型
    var filePath = ev.target.value    // 图片路径(本地)
    if(filePath){
        var fileEnd = filePath.substring(filePath.lastIndexOf("."))
        if(!fileTypes.includes(fileEnd)){
        	ev.target.value = "";
        	return alert('当前图片仅支持格式为：' + fileTypes.join(' ，'))
        }
    }else {
       	return alert('图片路径获取失败,请重新上传')
    }
}

图片大小验证

function _selectUploadPic(ev) {
	const ev_target = ev.target
    var fileSize = 0
    var fileMaxSize = 1024  //1M
    var filePath = ev_target.value
    if(filePath){
        fileSize = ev_target.files[0].size
        var size = fileSize / 1024
        if (size > fileMaxSize) {
        	ev_target.value = ""
            return alert("图片大小不能超过" + (fileMaxSize/1024)  + 'M')
        }else if (size <= 0) {
        	ev_target.value = ""
           	return alert("图片大小异常,请重新上传")
        }
    }else{
       return alert('图片路径获取失败,请重新上传')
    }
}

图片尺寸验证

function _selectUploadPic(ev) {
	const ev_target = ev.target
    var filePath = ev_target.value
    if(filePath){
        var filePic = ev_target.files[0]
        var reader = new FileReader()
        reader.onload = function (e) {
            var data = e.target.result
            //加载图片获取图片真实宽度和高度
            var image = new Image()
            image.οnlοad = function(){
                var width = image.width
                var height = image.height
                if (width >= 1080 && height >= 980){
                  	// do...
                }else {
                	ev_target.value = ""
                    return alert("图片分辨率不能低于1080*980")                   
                }
            };
            image.src= data;
        };
        reader.readAsDataURL(filePic);
    }else{
        return alert('图片路径获取失败,请重新上传')
    }
}

参考文章

---

上传图片限制大小、类型判断、像素判断