使用Ajax serialize()进行表单序列化方式上传不了文件

使用Ajax serialize()进行表单序列化方式上传不了文件

更多文章请移步:我的博客

通过传统的 form 表单提交的方式上传文件直接使用action ，form 表单提交会导致页面刷新

<form id="upload" action="/upload.do" method="post" enctype="multipart/form-data">  
     <p>上传文件：<input type ="file" name="file"/></p>  
     <input type="submit" value="上传"/>  
</form>

有时候我们不想他刷新或者需要有返回值判断的，比如前后端分离就需要使用ajax异步提交表单

$.ajax({  
     url: "http://127.0.0.1:8080/upload.do",  
     type: "POST",  
     data: $('#upload').serialize(),  
     success: function(data) {     
     },  
     error: function(data) {
     }  
});

通过$('#uploadForm').serialize()可以对 form 表单进行序列化，从而将 form 表单中的所有参数传递到服务端。

最终序列化后，表单中数据会一下面这种方式提交到后台：a=1&b=2&c=3&d=4&e=5
这种方式处理表单时所适用的input标签类型是有限的，只适用于一些常用的类型例如text、checkbox、select、date等等，上传文件的文件流是无法被序列化并传递的。不过智慧的劳动人们想出了解决办法，如今主流浏览器都开始支持一个叫做 FormData 的对象，这个对象就可以轻松地使用 Ajax 方式进行文件上传了。

如过jQuery_ajax报错：Uncaught TypeError: Illegal invocation，就加上 processData: false，contentType: false

 			var formData = new FormData($("#upload")[0]);
            console.log(formData);
            $.ajax({
                type : "post",
                url: "http://127.0.0.1:8080/upload.do",
                data: formData,
                processData: false,   // jQuery不要去处理发送的数据
                contentType: false   // jQuery不要去设置Content-Type请求头
                    /*$("#layoutAddForm").serialize(),*/
                //发送请求
                });

最后注意记得一定需要[0],不然拿不到文件名！！！！！