浅谈异步上传插件 jquery-file-upload插件

当我们需要异步上传文件的时候，我们倾向于在网上查找相关的JQuery插件，jquery-file-upload就是我们经常看到的，但是他的主页是英文的，对于我们这些英语比较差的同学来说，简直就是。。。今天就来讲一下最简单的使用方法，如果有写的不好的地方还请拍砖。

介绍

jQuery File Upload是一个非常优秀的上传组件，主要使用了XHR作为上传方式，并且利用了相当多的现代浏览器功能，所以可以实现诸如批量上传、超大文件上传、图片预览、拖拽上传、上传进度显示、跨域上传等功能。

他的功能非常强大，API也比较简单，如果能够熟练使用$.ajax的话，相信理解起来也不是多难的事，但是它的UI也会非常难用。个人建议，如果小的组件可以自己定义一套简单的UI，没必要使用那么复杂的东西。如果你一定要使用它的UI的话，建议你看一下定制jQuery File Upload为微博式单文件上传

jQuery File Upload的简化模型

jQuery File Upload包含了一堆文件，首先需要弄清楚的是最核心的部分是哪些，官网已经给出了最简单的模型基本功能，一个最简单的jQuery File Upload上传组件，必须包括以下文件：

• jQuery库，建议jQuery 1.8以上版本
• js/vendor/jquery.ui.widget.js ： jQuery UI Widget
• js/jquery.iframe-transport.js ： 扩展iframe数据传输
• js/jquery.fileupload.js ： jQuery File Upload核心类
• js/cors/jquery.xdr-transport.js 在IE下应载入此文件解决跨域问题

官网事例：

当我们需要点击按钮才能提交上传的时候，按钮上传

$(function () {
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
data.context = $('').text('Upload')
.appendTo(document.body)
.click(function () {
data.context = $('

').text('Uploading...').replaceAll($(this));
data.submit();
});
},
done: function (e, data) {
data.context.text('Upload finished.');
}
});
});

浅谈设计原理

1. 当我们对某个file input标签执行 upload插件的初始化方法后，插件会监听这个file input的change事件

2. 当用户选择文件的时候，会触发change事件

   if ($.support.fileInput) {
   this._on(this.options.fileInput, {
   change: this._onChange
   });
   }

3. 在_onChange处理函数中，会遍历files，触发upload插件的change方法

4. 当change函数返回true的时候，会触发upload插件的add方法

5. 在upload插件的回调函数中，会传入两个参数，fn(事件信息, 数据对象)，这个数据对象非常重要，我们几乎所有的操作都要使用到它

6. 在upload插件的add方法中可以执行我们的逻辑，例如我们想判断文件后缀是否满足条件，插件自带的参数 acceptFileTypes 在简化模型中不起作用，我们可以在change和add方法中判断，如果不满足返回false即可，如果通过可以直接执行data.submit()进行提交

7. 如果上传成功会执行done函数（响应成功），失败则会执行fail函数

8. 所有的回调函数的原理都是一样的，后面的大家自己研究

自定义UI

聊聊官网自带UI

自定义UI模版需要严格按照官网提供的模版进行操作，否则可能会出现各种问题，必要使用他的模版的原因是：ui的JS中操作Dom的逻辑都是固定的，如果你不按照这种格式的话，js查找不到相应的元素，不能获取相应的数据，包括上面提到的data数据。

探讨自定义UI

官网效果：

自定义实现：

这个插件所有的核心就是上面提到的data数据，我们可以随意的定义UI，但是定义好之后需要对UI和data数据进行绑定，这个是最重要的环节，图中的文件列表右侧的start、cancle按钮都非常好实现，使用简单模型里面的例子既可以了，这里就不多介绍了。

这里面最让人烦恼的就是上面那几个按钮，怎么绑定到所有数据上呢？方法非常简单，就是你把每一个文件的data数据存储在一个地方（可以使用jQuery.data()），在点击上面按钮的时候，查找符合要求的文件列表，读取data信息，调用data.submit...等方法就可以了，SoEasy！

结论
data这个数据对象非常重要，用data能实现你想要的自定义功能。