<input type = file/>上传图片限制大小、类型判断、像素判断

【前言】

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

 

【主体】

<input type="file" name="files" id="file" onchange="verificationPicFile(this)">  

 

//图片类型验证  
function verificationPicFile(file) {  
    var fileTypes = [".jpg", ".png"];  
    var filePath = file.value;  
    //当括号里面的值为0、空字符、false 、null 、undefined的时候就相当于false  
    if(filePath){  
        var isNext = false;  
        var fileEnd = filePath.substring(filePath.indexOf("."));  
        for (var i = 0; i < fileTypes.length; i++) {  
            if (fileTypes[i] == fileEnd) {  
                isNext = true;  
                break;  
            }  
        }  
        if (!isNext){  
            alert('不接受此文件类型');  
            file.value = "";  
            return false;  
        }  
    }else {  
        return false;  
    }  
}  

 

//图片大小验证  
function verificationPicFile(file) {  
    var fileSize = 0;  
    var fileMaxSize = 1024;//1M  
    var filePath = file.value;  
    if(filePath){  
        fileSize =file.files[0].size;  
        var size = fileSize / 1024;  
        if (size > fileMaxSize) {  
            alert("文件大小不能大于1M！");  
            file.value = "";  
            return false;  
        }else if (size <= 0) {  
            alert("文件大小不能为0M！");  
            file.value = "";  
            return false;  
        }  
    }else{  
        return false;  
    }  
}  

 

//图片尺寸验证  
function verificationPicFile(file) {  
    var filePath = file.value;  
    if(filePath){  
        //读取图片数据  
        var filePic = file.files[0];  
        var reader = new FileReader();  
        reader.onload = function (e) {  
            var data = e.target.result;  
            //加载图片获取图片真实宽度和高度  
            var image = new Image();  
            image.onload=function(){  
                var width = image.width;  
                var height = image.height;  
                if (width == 720 | height == 1280){  
                    alert("文件尺寸符合！");  
                }else {  
                    alert("文件尺寸应为：720*1280！");  
                    file.value = "";  
                    return false;  
                }  
            };  
            image.src= data;  
        };  
        reader.readAsDataURL(filePic);  
    }else{  
        return false;  
    }  
}  

 

 

 

 

 

 

 

.