blueImp/jQuery file upload 的正确用法（限制上传大小和文件类型）-白红宇

这个插件太出名了，几乎能完成所有能想象的到的效果，包括进度条、拖拽、甚至现在已经完美支持图片视频等的处理，三个字形容就是屌爆了。最近在做上传这一部分，发现网上对于上传文件大小的限制和类型检测等的方法都不妥当，包括老外写的。blueimp提供了完整的解决方案，验证当然是有的，所以对于一个普通的上传组件来说需要下面三个组件：

                         
<script src="//cdn.bootcss.com/blueimp-file-upload/9.12.5/js/jquery.fileupload.js"></script>
 
<script src="//cdn.bootcss.com/blueimp-file-upload/9.12.5/js/jquery.fileupload-process.js"></script>
 
<script src="//cdn.bootcss.com/blueimp-file-upload/9.12.5/js/jquery.fileupload-validate.js"></script>

大部分文章都没有包含process和validate这两个组件，前者负责处理上传过程中各个事件的管理，validate则是对验证的支持，如果不包含这两个组件，那么只能像下面这样来做一些验证：

                         
add: function (e, data) { 
        
var uploadErrors = [];
        
var acceptFileTypes = /\/(pdf|xml)$/i;
        
if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) { 
            
uploadErrors.push('Tipo de Archivo no Aceptado');
        
}
        
console.log(data.originalFiles[0]['size']) ;
        
if (data.originalFiles[0]['size'] > 5000000) { 
            
uploadErrors.push('Tamaño de Archivo demasiado Grande');
        
}
        
if(uploadErrors.length > 0) { 
            
alert(uploadErrors.join("\n"));
        
} else { 
            
data.context = $('<p/>').text('Subiendo...').appendTo(document.body);
            
data.submit();
        
}
    
}

那么用官方的方式可以如下

                         
<pre>acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 99 * 1024 * 1024,
minFileSize: 5,
maxNumberOfFiles: 50,
messages: { 
    
maxFileSize: 'File exceeds maximum allowed size of 99MB',
    
acceptFileTypes: 'File type not allowed'
},processfail: function (e, data) { 
    
var currentFile = data.files[data.index];
    
if (data.files.error && currentFile.error) { 
        
// there was an error, do something about it
        
console.log(currentFile.error);
    
}
}</pre>

明显简洁很多。

本文转自today4king博客园博客，原文链接：http://www.cnblogs.com/jinzhao/p/5914211.html，如需转载请自行联系原作者