FormData在IE9下不兼容的解决⽅案---ajaxSubmit
最近项⽬上⼀个上传图⽚功能出现BUG，原因就是在IE9下不⽀持FormData上传，从⽹上找了很多帖⼦看到最多的解决⽅案就是jQuery.ajaxSubmit，搞了⼤半天终于搞定了，再次记录⼀下。
⾸先记得引⽤js
<script src="${ctxStatic}/js/jquery.form.js" type="text/javascript"></script>
html代码
<form id="uploadForm" method="post" enctype="multipart/form-data">
<input type="file" id="sysIndexPic" value="" name="photo" accept=".jpg,.png,.jpeg,.bmp" />
<span><i class='fa fa-upload'></i> ；本地上传图⽚</span>
</form>
js代码
在原有的基础上增加了对IE9以下浏览器的兼容，相关业务代码请⾃⾏忽略
$("#sysIndexPic").live('change', function(){
var ver=getBrowrVersion();
if(ver=="IE6"|| ver=="IE7"|| ver=="IE8"|| ver=="IE9"){
var files =$('#sysIndexPic').val();
if(files !=''){
var options ={
url :'${ctx}/PicSearch/saveFile2',// 跳转到 action
dataType:'text',
success :function(data){
var result = JSON.par(data);
if(result.success == true){
//隐藏主导航层
//$(".div_navigator").hide();
$(".div_navigator").slideUp(100);
//顶级菜单选中状态
$(".menu_top").removeClass("top_active");
addTab(null,'图⽚检索','${ctx}/PicSearch/PicSearch?picpath='+result.msg);
$(".up-main-box2").hide();
$('.up-main-con-chuan').css({display:'block'})
$('.up-main-loader').css({display:'none'})
$("#sysIndexPic").after($("#sysIndexPic").clone().val(""));
$("#sysIndexPic").remove();
贾迎春判词}el{
Jalert('上传出现问题！','info');
}
},
error : function(){
$.jBox.info('出现错误，稍后再试！', '错误');
}
}
$('#uploadForm').ajaxSubmit(options);
}
}el{
var formData = new FormData();
var files =$('#sysIndexPic')[0].files;
if(files.length>0){
formData.append('files', files[0]);
$.ajax({
url :'${ctx}/PicSearch/saveFile',// 跳转到 action
data : formData,
微信公众平台注册
type:'post',
processData: fal, // ⑧告诉jQuery不要去处理发送的数据
contentType: fal, // ⑨告诉jQuery不要去设置Content-Type请求头
success : function(result){
if(result.success == true){
alert(123);
//隐藏主导航层
//$(".div_navigator").hide();
$(".div_navigator").slideUp(100);大蟹
//顶级菜单选中状态
$(".menu_top").removeClass("top_active");
addTab(null,'图⽚检索','${ctx}/PicSearch/PicSearch?picpath='+result.msg);
$(".up-main-box2").hide();
$('.up-main-con-chuan').css({display:'block'})
$('.up-main-loader').css({display:'none'})
$("#sysIndexPic").after($("#sysIndexPic").clone().val(""));
$("#sysIndexPic").remove();
}el{
Jalert('上传出现问题！','info');ps橡皮擦
狗狗的好大}
},
error : function(){
$.jBox.info('出现错误，稍后再试！', '错误');
}
});
}
}《大学》全文
});
后代Controller代码
@RequestMapping(value ="saveFile2")
@ResponBody
public String saveFile2(MultipartFile photo){
String fileName = System.currentTimeMillis() + "_" + OriginalFilename();
String path = upLoadFile2FTP( photo, fileName);
JSONObject json = new JSONObject();
if(StringUtils.isEmpty(path)){
json.put("success",fal);
json.put("msg","⽂件上传失败");
String();
//return new Ajax(fal, "⽂件上传失败");
}el{
上火吃什么好
json.put("success",true);
json.put("msg",path);
String();
//return new Ajax(true, path);
}
}
这⾥有个值得注意的点就是，原本后台⽅法的返回值是Ajax类型，改⽤ajaxSubmit提交之后，请求成功（图⽚可以正常上传）但是⽆法进success回调函数，完了浏览器直接提⽰下载⽂件，打开⽂件是个json串，给我整蒙了
我的解决⽅案是把dataType改成text类型，后台⽅法返回String类型的json串，然后就能进回调函数了，如果需要⽤到json对象的话，⽤JSON.par(str)转换即可
好了，我去提交代码了，嘻嘻嘻女人30岁
