ajax上传文件jquery出现Illegal invocation错误_徐川江的博客_新浪博客

今天做一个form的文件上传，本以为easy，但点击上传才发现jquery一直报Uncaught TypeError: Illegal invocation错误，百度也没说的很清楚，但最后还是发现问题，特此记录一下。

      form表单：

上传失败的js代码：

var formData = new FormData($("#import_data_form",layero)[0]);

$.ajax({

url: basePath + "trade/resourceListed/importFile.htm",

data: formData,

async: false,  

cache: false,  

type: 'POST',

dataType: 'json',

success: function(data) {

if (data.success) {

top.layer.msg("成功导入"+data.data+"条资源", {

icon: 1,

time: 2000

}, function() {

// 刷新数据源

bt.fn.reload(true);

top.layer.close(index);

});

}else {

top.layer.alert(data.errorMsg, {

closeBtn: 0,

shift: 1,

btn: ['重新选择并提交']

});

}

}

});

上传成功的js代码：

var formData = new FormData($("#import_data_form",layero)[0]);

$.ajax({

url: basePath + "trade/resourceListed/importFile.htm",

data: formData,

async: false,  

cache: false,  

contentType: false,  // 多出的参数配置

processData: false,  // 多出的参数配置

type: 'POST',

dataType: 'json',

success: function(data) {

if (data.success) {

top.layer.msg("成功导入"+data.data+"条资源", {

icon: 1,

time: 2000

}, function() {

// 刷新数据源

bt.fn.reload(true);

top.layer.close(index);

});

}else {

top.layer.alert(data.errorMsg, {

closeBtn: 0,

shift: 1,

btn: ['重新选择并提交']

});

}

}

});

成功的js代码多了两个参数的配置就上传ok了，特此查了一下这两个参数的含义。第一个参数contentType: false的意义：通常表单的文件提交中限定 form 的 method 必须为 POST ， enctype = “multipart/form-data” 以及.指定了contentType上传类型，加上请求方式为post方式，而 contentType 与 post 又有区别，如下：

1. 请求头的不同，对于上传文件的请求，contentType = multipart/form-data是必须的，而 post 则不是，毕竟 post 又不是只上传文件～。

2. 请求体不同。这里的不同也就是指前者在发送的每个字段内容之间必须要使用分界符来隔开，比如文件的内容和文本的内容就需要分隔开，不然服务器就没有办法正常的解析文件，而后者 post 当然就没有分界符直接以 name = "value"的形似发送。

在 ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件.

说说第二个多出的参数processData: false，如果不加此参数就会出现jquery的Uncaught TypeError: Illegal invocation错误， 这个参数是jquery独有的。processData的默认值是true。用于对data参数进行序列化处理，这里的文件上传不需要在进行序列化处理，故讲processData设置成false，注意 processData:false只对post有效.