上传图片 可限制大小和文件类型

方法1

js

//验证上传文件大小和类型
 
/**
 * 
 * @param {this} value_ [获取input对象，一般为this]
 * @param {[number]} size_ [文件限制的大小，单位为kb]
 * @param {[string]} type_ [文件类型，当前支持image和office]
 * @param {[function]} callback [验证通过的回调]
 */
 
function fileValid (value_, size_, type_, callback) {
    var file = value_.files[0]
    var fileSize = (file.size / 1024).toFixed(0)
    var fileType = value_.value.substring(value_.value.lastIndexOf("."))
 
    if (fileSize > size_) {
        alert('文件过大')
        return false
    }
 
    switch (type_) {
        case 'image':
            if (!fileType.match(/.jpg|.jpeg|.gif|.png|.bmp/i)) {
                alert('请上传图片')
                return false;
            }
            break;
        case 'office':
            if (!fileType.match(/.doc|.docx|.xls|.xlsx|.ppt|.pptx/i)) {
                alert('请上传word、excel或ppt文件')
                return false;
            }
            break;
        default:
            console.error('type_参数设置不正确！')
            return false;
            break;
    }
 
    callback()
    }

html

<input type="file" id="upload-file">
 
<script>
    $('#upload-file').change(function() {
        fileValid(this, 2048, 'image', function() {
            alert('success')
        })
    })
</script>

方法2

html

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

js

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; } }