前言 项目中有个页面跑在IE9的环境下，需要一个简单的文件上传功能。尝试了一下kendo ui 的upload组件，发现在IE9下回调函数有bug。没办法网上查了一波，都说jQuery-File-Upload插件好用，遂下载使用,并且成功了。
这里提供一个DEMO，并记录一下注意事项。
首先是下载插件，然后按顺序引用
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> //建议使用jQuery 1.8以上版本 <script src="js/vendor/jquery.ui.widget.js"></script> <script src="js/cors/jquery.xdr-transport.js"></script> <script src="js/jquery.iframe-transport.js"></script> //在IE下应载入此文件解决跨域问题 <script src="js/jquery.fileupload.js"></script> <script src="js/jquery.fileupload-process.js"></script> <script src="jquery.fileupload-validate.js"></script> //如果需要文件类型验证必须引入
然后新增一个简单的input:
<input name="files" id="files" type="file"/>
注意一下，如果为了界面好看，把这个input隐藏掉，然后使用自己的按钮，并在JS里触发这个input的click事件的话，在IE8下会有无法触发回调的BUG，我因为是IE9没有遇到这个问题。
然后是JS代码：
$("#files").fileupload({
url: uploadurl, //服务器的URL
dataType: ‘json‘, //设置返回数据格式
autoUpload: true,
acceptFileTypes: /(\.|\/)(png|jp?g|gif)$/i,//文件格式限制
formData: {} //可传入参数
processfail: function (e, data) { //验证文件类型
var currentFile = data.files[data.index];
if (data.files.error && currentFile.error) {
alert("文件类型错误!");
}
},
done: function (e, data) {
var result = JSON.parse(data.result); //这里注意，IE返回数据后，要用JSON.parse进行处理
//之后自行处理
}
}).error(function () {
console.log(arguments, ‘error‘);
});
上后端代码之前先说一下，正常情况下在IE9上传文件后，会弹出下载JSON文件的框。查了下资料，发现
这是由于jQuery File Upload都是采用XHR在传递数据，服务器端返回的通常是JSON格式的响应，但是IE会将这些JSON响应误认为是文件传输，然后直接弹出下载框询问是否需要下载。
解决的办法是将响应头从Content-Type: application/json 更改为Content-Type: text/plain或者text/html
下面JAVA后台代码：
@RequestMapping(value = "/uploadurl", method = RequestMethod.POST, produces = {"text/plain"})
public String upload(@RequestParam MultipartFile files, @RequestParam Map formData) {
InputStream fis=files.getInputStream(); //文件流
String fileName=files.getOriginalFilename(); //文件路径
//做自己的操作
result="true";
return result;
}
最后还有一个问题，更改响应头后返回值最好是String或者JSON类型的，不然的话，前端会无法触发回调函数。
初次尝试jQuery-File-Upload，还有很多强大的功能还没用到，后台代码也比较简洁，其他再自行摸索。
嗯，最后吐槽一句IE真该淘汰了。
