前言
不得不说jQuery file upload插件文档有点杂乱，API是挺全的，但是也没有明确哪些API兼不兼容IE，再加上还不熟悉之前flash写的业务代码，头疼。作为一个未毕业、0基础刚入门的前端切图仔，采坑是不可避免的，从小老师教导：‘’好记性不及烂笔头记‘’，那么记之以砥砺前行。
正文
采坑记录
1.jQuery File Upload的使用
Github地址：https://github.com/blueimp/jQuery-File-Upload
引入：
<script src="../js/lib/jquery/1.9.1/jquery.min.js"></script>//最好1.8版本向上 <script src="../js/vendor/jquery.ui.widget.js"></script>//必须 <script src="../js/jquery.iframe-transport.js"></script>//兼容IE必须 <script src="../js/jquery.fileupload.js"></script>//必须 <script src="../js/cors/jquery.xdr-transport.js"></script>//跨域 非必须 <script src="../js/jquery.fileupload-process.js"></script>//进度 非必须 <script src="../js/jquery.fileupload-validate.js"></script>//验证 非必须
上传的主要文件是前四个，如果需要验证和进度条功能则需要引入最后两个文件。
Ps：顺序最好不要乱，有依赖关系！
代码：
$('#fileupload').fileupload({ dataType: 'json',//上传返回结果 url:'',//上传目标路径 fileInput: $('input:file'),//指定上传的对象，值必须是jquery对象 singleFileUpload:true,//是否单文件上传 multiple:true,//是否多文件上传 autoUpload:false,//是否自动上传 forceIframeTransport:true,//强制使用iframe传输，IE必须 acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,//文件类型 maxFileSize: 10000000, // 10 MB（有坑） minFileSize: undefined, // No minimal file size maxNumberOfFiles: 10,//最大上传文件数 add : function(e, data) { data.files[0]//文件对象 data.files[0].name//文件名 },//添加文件的回调,data不是文件本身，是一个包含文件的对象 send : function(e,data) {},//开始发送的回调 done : function(e, data) {},//文件上传完成的回调，data是返回的对象 fail : function(e,data) {}.//上传失败的回调 always : function(e,data) {},//不管文件上传成功不成功，还是停止了，过程结束的回调。 progress: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#upload-progress').css('width',progress + '%'); },//上传进度的回调 )}
以上是初始化内容，具体API 查看Github：https://github.com/blueimp/jQuery-File-Upload/wiki/Options
2.Seajs改造
原：
由于代码中只支持AMD规范，而Seajs是CMD规范，故将其改造。
将上图中的代码删除，并添加
define（" "，function(require,exports){}）
3.jQuery File Upload上传插件在第一次选择文件后进行取消操作，第二次选择文件后进行上传操作，会将第一次选择的图片也上传
大致原因是click事件的绑定，每次触发add回调时，click事件handler都会进行绑定。
因此，在第一次add时，handler被绑定到input:file上。
第二次add，再次绑定handler，这次针对的是第二个文件。
所以，这两个文件都被绑定在了input:file上，并在第二次点击上传按钮时进行提交。所以在绑定click事件处理程序之前，向按钮添加unbind解决这个问题。
参考：（解决来源）问题大同小异：(https://stackoverflow.com/questions/53812048/jquery-file-upload-plugin-uploads-the-first-image-again-on-uploading-the-second)
4. 验证文件类型、大小失败
具体原因未知，但是有一种麻烦的解决办法，就是手写验证，emmm…，那 jquery-fileupload-validate 要你何用？
参考：（解决来源） [https://stackoverflow.com/questions/15549094/jquery-file-upload-plugin-how-to-validate-files-on-add](https://stackoverflow.com/questions/15549094/jquery-file-upload-plugin-how-to-validate-files-on-add)