前言

不得不说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/17451629/maxfilesize-and-acceptfiletypes-in-blueimp-file-upload-plugin-do-not-work-why#