$("form").serialize()和 new FormData($('#uploadForm')[0])的区别

$("form").serialize()和 new FormData($('#uploadForm')[0])都是序列化表单，实现表单的异步提交，但是二者有区别

首先，前者，只能序列化表单中的数据 ，比如文本框等input  select等的数据，但是对于文件，比如文件上传，无法实现，那么这时候，FormData就上场了，

new FormData使用需要有一个注意点，

注意点一：，对于jquery的要求是，好像是 版本1.8及其以上方可支持。

另外该对象不仅仅可以序列化文件，一样可以用作表单数据的序列化，（就是说包含了serialize()的功能）；

注意点二：看脚本

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

$.ajax({

               type: 'POST',

               data: uploadFormData,

               url: '/Artical/Publist',//TypeError: 'append' called on an object that does not implement interface FormData.

               processData: false,

               contentType: false,

               async: false,

               success: function (data) {

                   if (typeof (data) == undefined) {

                       alert("用户信息已丢失，请重新登录！"); window.parent().location.href = "/Account/Login";

                   }

                   if (data.ErrorMsg == "") {

                       alert('美文发布成功！');

                   } else { alert(data.ErrorMsg); }

               }

           });

　　注意红色部分脚本以及说明，

1

processData: false, contentType: false,缺少这二者的设置，将会出现  红色部分的错误提示，提交失败。

1

<br><br>以下是一个完整的前后台的参考脚本：

//提交文件    function submitFile() {        $('.btn-publish').click(function () {            //var title = $('.txt-video-title').val();            var uploadFormData = new FormData($('#uploadForm')[0]);//序列化表单，$("form").serialize()只能序列化数据，不能序列化文件            $.ajax({                type: 'POST',                data: uploadFormData,                url: '/Artical/Publist',//TypeError: 'append' called on an object that does not implement interface FormData.                processData: false,                contentType: false,                async: false,                success: function (data) {                    if (typeof (data) == undefined) {                        alert("用户信息已丢失，请重新登录！"); window.parent().location.href = "/Account/Login";                    }                    if (data.ErrorMsg == "") {                        alert('美文发布成功！');                    } else { alert(data.ErrorMsg); }                }            });        });    }