定制jQuery File Upload为微博式单文件上传
?
jQuery File Upload的最简模型?
jQuery File Upload包含了一堆文件，首先需要弄清楚的是最核心的部分是哪些，根据官方的例子可以知道，一个最简单的jQuery File Upload上传组件，必须包括以下文件：
?
jQuery核心库，建议使用jQuery 1.8以上版本js/vendor/jquery.ui.widget.js ： jQuery UI Widgetjs/jquery.iframe-transport.js ： 扩展iframe数据传输js/jquery.fileupload.js ： jQuery File Upload核心类js/cors/jquery.xdr-transport.js 在IE下应载入此文件解决跨域问题?
此时只需要加载一个上传按钮
?
?
这一部分的o.files完全来自服务器端的json响应，所以模板内容可以自由发挥。唯一被定制的元素为删除按钮.delete。 点击这个按钮会向按钮中指定的url发送请求，比如
?
<div class="delete"><button data-type="DELETE" data-url="/file/1">Delete</button></div>?
点击后则会用DELETE方式发送HTTP请求
?
DELETE /file/1?
jQuery File Upload UI工作流程?
有了上面罗列的UI元素，就可以拼凑出一个简单的jQuery File Upload UI工作流程：
?
?
定制过程?
有了上面的基础，要个性化的定制jQuery File Upload就简单了很多：
?
限制文件类型?
由于没有使用Flash空间，上传的文件选择框是无法限制文件类型的，所以所谓的限制文件类型，只能让用户选择文件之后，用file.error显示一个错误信息。例如本次需要限定可上传的文件为图片，那么Options指定：
?
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i?
即可。
?
在Google Chrome浏览器中，可以用input:file原生支持文件类型限定，可以配合使用：
?
<input type="file" name="upload[]" accept="image/png, image/gif, image/jpg, image/jpeg">?
不过在客户端做再多的限定也只是提升用户体验，不能真正保证安全性，所以不要忘记了在服务器端做同样的类型检测。
?
文件数量限制?
只需在Options指定
?
maxNumberOfFiles : 1?
即可。jQuery File Upload UI的处理方式是当用户上传一个文件后，文件选择按钮被置为Disabled。
?
这同样只是客户端的小把戏，真正想要严格的约束用户只能上传一个文件还是需要在服务器端通过Session做更加复杂的控制。
?
文件大小限制?
Options中指定
?
maxFileSize: 5000000?
即只允许单文件最大5MB。
?
Firefox disable bug?
在Firefox环境下测试是，发现如果将文件数量限制为1，选择一次文件，刷新页面之后文件选择按钮会莫名其妙的被加上一个Disabled属性，导致无法点击。所以最终我们的初始化代码为：
?
var uploader = $("#fileupload");uploader.fileupload({ dataType: 'json', autoUpload: false, acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, maxNumberOfFiles : 1, maxFileSize: 5000000 });uploader.find("input:file").removeAttr('disabled');?
最后就是界面的一些调整，完整代码在EvaEngine的File模块下，点击查看.