file_upload上传

jQuery-File-Upload官网

官方实例

HTML:

<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
1

依赖：

<script src="js/jquery.min.js"></script><script src="js/vendor/jquery.ui.widget.js"></script><script src="js/jquery.iframe-transport.js"></script><script src="js/jquery.fileupload.js"></script>
1
2
3
4

JS调用：

$('#fileupload').fileupload({        dataType: 'json',        done: function (e, data) {            $.each(data.result.files, function (index, file) {                $('<p/>').text(file.name).appendTo(document.body);            });        }    });
1
2
3
4
5
6
7
8

显然以上调用在实际项目中实在太过简洁了···

---

Tips

options常用配置

• options

$this.fileupload({     url: url,//服务器API     autoUpload: false,//是否自动上传     acceptFileTypes: /(.|\/)(jpe?g|png)$/i,//文件格式限制     maxNumberOfFiles: 1,//最大上传文件数目     maxFileSize: 5000000,//文件不超过5M     sequentialUploads: true,//是否队列上传     dataType: 'json'//期望从服务器得到json类型的返回数据})
1
2
3
4
5
6
7
8
9

事件Callback

• 挂载方法

  $this.fileupload({options})   .bind('fileuploadadd', function (e, data) {/* ... */})   .bind('fileuploadsubmit', function (e, data) {/* ... */})   .bind('fileuploaddone', function (e, data) {/* ... */})   .bind('fileuploadprogressall', function (e, data) {/* ... */})`
1
2
3
4
5

• done没有回调函数的问题，有网友说是由于dataType设置为了json，把autoUpload设置为true这都是什么跟什么？！我是使用的手动触发上传，关键代码为‘$handler.click(function(){data.submit(); })’看吧，是使用的submit触发的，而回调函数有fileuploadsubmit，那就对应起来啦。

• 但是后台要返回数据时，又必须响应fileuploaddone才能拿到数据，后台返回结果存在data.result里···小解姐姐我也很绝望啊···还需要继续踩坑啊啊啊~~~

图片预览

官网的图片预览使用了canvas，对于小型开放···感觉成本太高（其实是太懒）。 在图片添加完成后会出发事件fileuploadadd，他的回掉函数有两个参数（e,data），我们上传的file就在data里。

data.files是个数组，里面存放着file,预览图片，对这里的file们做处理就是啦。

 function  LocalURL(file) {            var url = null;            if (window.createObjectURL != undefined) {                 url = window.createObjectURL(file);            } else if (window.URL != undefined) {                url = window.URL.createObjectURL(file);            } else if (window.webkitURL != undefined) {                 url = window.webkitURL.createObjectURL(file);            }            return url;//     eg:     blob:http://localhost/671c3409-0047-44ec-bcba-89d63a439231   }
1
2
3
4
5
6
7
8
9
10
11

取消上传

他的上传其实也就是jQuery的ajax。取消上传的关键是要保留下上传的handler。 
即：

$this.fileupload({options}).bind('fileuploadadd', function (e, data) {    $('#uploadBtn').click(function () {        jqXHR = data.submit();    })    $('#cancelBtn').click(function () {        jqXHR.abort();    })}) 
1
2
3
4
5
6
7
8
9
10
11

这时候要考虑响应错误信息。 
该插件无论是请求超时还是手动取消上传（jqXHR.abort()）都会响应fileuploadfail，但是可以通过data.errorThrown的值加以区分

$this.fileupload({options}).bind('fileuploadfail', function (e, data) {      if (data.errorThrown=='abort') {             NUI.showMsg('上传取消！', 'success',3);         }else{             NUI.showMsg('上传失败，请稍后重试！', 'error',3);         }})
1
2
3
4
5
6
7
8

设置请求头

参考 jquery file upload 在http Header中增加header项

方法一、 
我尝试了在options对象里添加自定义属性accessToken，并在jquery.fileupload.js里对_initXHRData函数做了进一步加工

$this.fileupload({     url: url,     autoUpload: false,     acceptFileTypes: /(.|\/)(jpe?g|png)$/i,     maxNumberOfFiles: 1,     maxFileSize: 5000000,     sequentialUploads: true,     accessToken:$.cookie('access_token'),  }) _initXHRData: function (options) {    ···    if (options.contentRange) {       options.headers['Content-Range'] = options.contentRange;    //我添加的代码···    if (options.accessToken) {        options.headers['Access-Token'] = options.accessToken;    };    ···}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

方法二、 
直接在options里添加属性headers，不过没有成功。我跟了很多遍源码，但依然没找到失败的原因，反而觉得这样不失为最完美的解决方法···如果哪位高人洞悉其中奥秘，还请不吝赐教。

$this.fileupload({     url: url,     autoUpload: false,     acceptFileTypes: /(.|\/)(jpe?g|png)$/i,     maxNumberOfFiles: 1,     maxFileSize: 5000000,     sequentialUploads: true,     headers:{         'Access-Token':$.cookie('access_token')     }  })
1
2
3
4
5
6
7
8
9
10
11

方法三、 
参考Jquery File Upload - Not sending headers in IE9 
我从他的问题里看到了他的解决方法，并且我成功设置了请求头。（金星完美.jpg)。

$this.fileupload({        url: url,        autoUpload: false,        acceptFileTypes: /(.|\/)(jpe?g|png)$/i,        maxNumberOfFiles: 1,        maxFileSize: 5000000,        sequentialUploads: true,        beforeSend: function ( xhr ) {          xhr.setRequestHeader('Access-Token', $.cookie('access_token'));       },        })