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" style="width: 208px" accept=".jpg,.png,.jpeg,.bmp" />
	<span><i class='fa fa-upload'></i>&nbsp;本地上传图片</span>
</form>

js代码
在原有的基础上增加了对IE9以下浏览器的兼容，相关业务代码请自行忽略

$("#sysIndexPic").live('change', function(){
					var ver=getBrowserVersion();
					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.parse(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();
									} else {
										Jalert('上传出现问题！','info');
									}
								},
								error : function() {
									$.jBox.info('出现错误，稍后再试！', '错误');
								}
							}

							$('#uploadForm').ajaxSubmit(options);
						}
					}else{
						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: false,    // ⑧告诉jQuery不要去处理发送的数据
								contentType: false,    // ⑨告诉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();
									} else {
										Jalert('上传出现问题！','info');
									}
								},
								error : function() {
									$.jBox.info('出现错误，稍后再试！', '错误');
								}
							});
						}
					}
		   		});

后代Controller代码

@RequestMapping(value = "saveFile2")
    @ResponseBody
    public String saveFile2(MultipartFile photo) {
        String fileName = System.currentTimeMillis() + "_" + photo.getOriginalFilename();
        String path = upLoadFile2FTP( photo, fileName);
		JSONObject json = new JSONObject();
        if(StringUtils.isEmpty(path)){
        	json.put("success",false);
        	json.put("msg","文件上传失败");
            return json.toString();
            //return new Ajax(false, "文件上传失败");
        }else{
			json.put("success",true);
			json.put("msg",path);
			return json.toString();
			//return new Ajax(true, path);
        }
    }

这里有个值得注意的点就是，原本后台方法的返回值是Ajax类型，改用ajaxSubmit提交之后，请求成功（图片可以正常上传）但是无法进success回调函数，完了浏览器直接提示下载文件，打开文件是个json串，给我整蒙了

我的解决方案是把dataType改成text类型，后台方法返回String类型的json串，然后就能进回调函数了，如果需要用到json对象的话，用JSON.parse(str)转换即可

好了，我去提交代码了，嘻嘻嘻