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下应载入此文件解决跨域问题

此时只需要加载一个上传按钮

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

 以及一行代码

$('#fileupload').fileupload();  

就完成了一个最基本的上传组件。这个最简单的上传组件可以将选中的文件以表单形式提交到data-url约定的URL，同时提供了足够多的设置和基础事件可供扩展。

jQuery File Upload的简单扩展

对于最简模型，稍加扩展就可以实现一些比较常用的功能，比如可以在上传完毕后可以显示一个简单的结果：

$('#fileupload').fileupload({  
    done: function (e, data) {  
        $.each(data.result, function (index, file) {  
            $('<p/>').text(file.name + ' uploaded').appendTo($("body"));  
        });  
    }  
});  

或者显示上传进度，配合一些进度条组件就可以构成一个上传进度条

$('#fileupload').fileupload('option', {  
    progressall: function (e, data) {  
        var progress = parseInt(data.loaded / data.total * 100, 10);  
        console.log(progress + '%');  
    }  
});  

等等。只要多阅读手册就可以配合项目做更具体的扩展开发。

XHR响应为Json时IE的下载BUG

这里需要特别注意的是，由于jQuery File Upload都是采用XHR在传递数据，服务器端返回的通常是JSON格式的响应，但是IE会将这些JSON响应误认为是文件传输，然后直接弹出下载框询问是否需要下载。

解决这个问题的方法是必须将相应的Http Head从

Content-Type: application/json  

 更改为

Content-Type: text/plain

具体的实现根据服务端不同有所区别，比如ZF2中可以在Controller中这样写：

$this->getServiceLocator()->get('Application')->getEventManager()->attach(\Zend\Mvc\MvcEvent::EVENT_RENDER, function($event){  
    $event->getResponse()->getHeaders()->addHeaderLine('Content-Type', 'text/plain');  
}, -10000); 

未完！！