ajaxSubmit/ajaxForm 上传文件 ie弹出提示下载信息

ajaxSubmit/ajaxForm 上传文件 ie弹出提示下载信息

通过页面将文件上传到后台的方式大家或多或少都了解一些。

主要分为3步：

1、jsp页面使用input，type为file

      2、后台使用File/MultipartFile对象接收

     3、jsp页面将input放入form表单中，同时form加上enctype="multipart/form-data"这一属性

  之后将该表单提交，后台即可接收到文件对象。

  这样虽然满足了部分需求，但是如果需要在后台进行判断，然后返回页面的话，就不满足需求了。即使后台使用rederHtml()，由于表单已经提交，页面也会进行一次刷新。

  这时就需要用到ajax提交文件到后台了，有些人认为只要把ajax的data属性直接使用$("#frm").serialize()，就可以将整个表单包括文件提交到后台了，其实不然，这个方式是无法将文件流也提交到后台的。

  其实将文件提交的后台也简单，只需要用比较新的jquery（支持FormData），将整个表单封装为FormData对象，然后加上contentType: false, processData: false,这两个ajax的属性就可以了，ajax其实默认都是以字符流传输数据到后台，加上这两个意思就是告诉后台，我传的是一个对象，就可以直接用文件对象接收到了。例：

var formData = new FormData(document.getElementByIdx_x_x("formFile"));

$.ajax({

type: "post",

url: "sysupload!upload.iframe",

data: formData,

cache: false,  

        contentType: false,  

        processData: false,

       dataType: "text",

async: false,

success: function(data){

var json = eval_r("("+data+")");

window.location.href = json.msg;

},

error: function(){

;

}

});

但是这个方法有一个问题，不兼容ie，浏览器控制台一直报“formData”对象未定义，硬伤，没百度到，所以改用其他方式，就是jquery.form.js中的ajaxSubmit。

首先，引入1.6-1.12版本的jquery，和最新的jquery.form.js。

这里要注意的是jquery2.0版本及其以上都不兼容jquery.form.js。所以版本要引入对了。

然后就是使用ajaxSubmit方法来将表单提交到后台。用法和ajax相似，只是data就是表单，不用这个参数了。例：

var ajax_option={

iframe: true,

type: "post",

url: "sysupload!upload.iframe",

async: false,

cache: false,  

        contentType: false,  

        processData: false,

dataType: "text",

    success:function(data){

        var json = eval_r("("+data+")");

if (!json.success) {

;

}

window.location.href = json.url;

   },

    error:function(){

        ;

   }

};

$('#formFile').ajaxSubmit(ajax_option);

其实写到这一般都应该成功了。ie也可以兼容，但是这时候有些人就会出现ie会弹出提示下载信息，而且无法进入success的问题。

这个问题的官方解释是：因为是用隐藏iframe提交的表单，如果服务器返回的是“application/json”类型的数据，IE和Chrome默认是下载文件的，因为内容是返回给了iframe，而不是ajaxSubmit的success方法。

这个问题其实和ajax无关了，原因就是你的后台代码返回值是json。所以说，即使ajax中的dataType参数写的是text，其实后台代码返回的还是json，就还会弹出下载信息的提示。简而言之，前台js的dataType必须为text，同时后台返回的参数也必须是String类型的。

若你还有其他方法解决这个问题，欢迎在下方留下你的方式，大家一起讨论，一起进步，做一只有梦想的网虫！