blueImp/jQuery file upload 的正确用法(限制上传大小和文件类型)
2016-09-27 20:37
621 查看
这个插件太出名了,几乎能完成所有能想象的到的效果,包括进度条、拖拽、甚至现在已经完美支持图片视频等的处理,三个字形容就是屌爆了。最近在做上传这一部分,发现网上对于上传文件大小的限制和类型检测等的方法都不妥当,包括老外写的。blueimp提供了完整的解决方案,验证当然是有的,所以对于一个普通的上传组件来说需要下面三个组件:
大部分文章都没有包含process和validate这两个组件,前者负责处理上传过程中各个事件的管理,validate则是对验证的支持,如果不包含这两个组件,那么只能像下面这样来做一些验证:
那么用官方的方式可以如下
明显简洁很多。
<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>
明显简洁很多。
相关文章推荐
- jQuery焦点不在输入框内判断不能为空
- jquery防止重复点击,实现截流的效果
- 时间控件插件[js/jquery]总结和简单实践-前端
- Jquery easyui tree
- 源码-JavaScript&jQuery交互式前端开发-第7章-JQuery-修改内容
- jquery eval解析JSON中的注意点介绍
- 使用ajax获取JSON数据的jQuery代码的格式
- JQuery中的$.getScript()、$.getJson()和$.ajax()方法
- jquery对象与js对象的相互转换
- jquery遍历
- 源码-JavaScript&jQuery交互式前端开发-第7章-JQuery-基本示例
- Jquery组件使用说明
- jquery 定义对象并进行操作
- JQuery简单实现菜单的点击效果
- 使用Jquery解析Json基础知识
- jquery ajax调用数据后判断返回值是否为 json 格式
- 在使用jquery的时候碰到的问题,以及跨域的问题
- jQuery实现右键菜单、遮罩等效果代码
- jQuery实现图片轮播效果代码
- js(jquery)代码在页面上实时地显示时间