Jquery Ajax上传文件错误总结

今天用Jquery Ajax提交表单时,在使用.ajax()方法一直报错,服务器获取的值一直为null,并且连续报错,因此记录下来几处关键错误

1.报关于multipart/form-data的错误
2.报关于Uncaught TypeError: Illegal invocation的错误
我的$.ajax方法:

	$("#btn").click(function () {

    var name=$("#t1").val();
     $.ajax({
         type:"post",
         url:"fileupload",
         data:$("#form1").serialize(),
         success:function (data) {
         console.log(data);
         }
         }
     );
 })

1.Header中的content-Type未设置为multipart/form-data

在表单中加入文件类型的元素时,我设置了enctype=“multipart/form-data”,但没想到会报这个错误,

the request doesn’t contain a multipart/form-data or multipart/mixed stream, content type header is application/x-www-form-urlencoded; charset=UTF-8

于是我在$.ajax()方法中加入了Content-Type:false;但结果依旧不变**

2.然后我认为可能是$.ajax方法中的data部分不能以$("#form").serialize()的方式传递,所以我使用定义formData来传输数据

$("#btn").click(function () {

    var name=$("#t1").val();
     $.ajax({
         type:"post",
         url:"fileupload",
         data:new FormData($("#form1")[0]),
         success:function (data) {
         console.log(data);
         }
         }
     );
 })

结果在前端控制台上报了Uncaught TypeError: Illegal invocation错误

最后通过百度,我发现需再设置一个参数processData: false

默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型
“application/x-www-form-urlencoded”。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为
false

所以如果使用jqery ajax上传文件,除了form表单必须设置enctype="multipart/form-data"之外,必须记得设置两个重要参数:

contentType:false,
processData: false,