blueImp/jQuery file upload 的正确用法(限制上传大小和文件类型)

简介:

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

1
2
3
<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则是对验证的支持,如果不包含这两个组件,那么只能像下面这样来做一些验证:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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();
         }
 
     }

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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,如需转载请自行联系原作者

相关文章
|
2月前
|
JavaScript
jQuery :nth-of-type(n)选择器的用法详解
jQuery中,:nth-of-type(n)选择器可以对selector选择器匹配选择到的所有HTML元素进行二次匹配选择,为了更好地阐述:nth-of-type(n)的语法,这里假设selector是一个元素p选择器,如此,:nth-of-type(n)可以用于匹配p元素选择器选择到的p元素指向的父元素中第n个类型为p的子元素,而且与p是否是该父元素的第n个子元素无关,比如
46 5
|
9月前
|
JavaScript 前端开发 API
【前端用法】jQuery在线引用地址(全)
【前端用法】jQuery在线引用地址(全)
1217 0
|
15天前
|
JavaScript 前端开发
必知的技术知识:jQuery中queue和dequeue的用法
必知的技术知识:jQuery中queue和dequeue的用法
|
9月前
|
缓存 前端开发 JavaScript
【前端用法】jquery获取当前页面的URL信息
【前端用法】jquery获取当前页面的URL信息
65 0
|
2月前
|
JavaScript 程序员
让我们一起抄代码,JQuery 用法整理
让我们一起抄代码,JQuery 用法整理
39 0
|
存储 JavaScript 前端开发
【前端每日一问002】jquery中each与data方法的用法与概念
【前端每日一问002】jquery中each与data方法的用法与概念
|
存储 NoSQL JavaScript
利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
224 0
|
JavaScript
jQuery $.makeArray()方法的用法
jQuery $.makeArray()方法的用法
233 0
jQuery  $.makeArray()方法的用法
|
JavaScript 前端开发
jQuery $.inArray()方法的用法
在 jQuery 中,我们可以使用$.inArray()方法来判断某个值是否存在于数组中。
613 0
jQuery $.inArray()方法的用法
|
JavaScript
jQuery的addClass、siblings、removeClass、each、html、eq、show/hide用法
jQuery的addClass、siblings、removeClass、each、html、eq、show/hide用法
188 0
jQuery的addClass、siblings、removeClass、each、html、eq、show/hide用法