【网页-JQuery】关于jquery的 $("form").serialize()和 new FormData表单序列化

https://www.cnblogs.com/Tmc-Blog/p/5097320.html

$("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); }
                }
            });

        });
    }

/// <summary>
        ///     上传新图片，（包含文件上传）
        /// </summary>
        /// <returns></returns>
        public JsonResult UpLoad()
        {
            if (null != Session[Consts.SYSTEMUERSESSION])
            {
                string pictureName = Request["videoTitle"];//图片标题
                string pictureInfoUrl = "";//图片上传之后的虚拟路径
                string pictureCategoryKey = Request["PictureCategoryList"];//视频分类外键ID

                FileUpLoadResult fileUpLoadPicture = null;//用于输出结果

                string fileSavePath = Consts.PICTURESAVEPATH + DateTime.Now.ToString("yyyyMMdd") + "/";//当天时间最为文件夹
                string fileName = DateTime.Now.ToString("yyyyMMddHHmmssfff");//生成的文件名称
                //上传，如果是视屏文件，自动生成  接切图
                fileUpLoadPicture = Request.UpLoad(fileSavePath, null, "", fileName, "");

                #region 装箱、入库
                if (fileUpLoadPicture.FileSavePath != null)
                {
                    foreach (var path in fileUpLoadPicture.FileSavePath)
                    {
                        pictureInfoUrl += (path + ",");
                    }
                    pictureInfoUrl = pictureInfoUrl.Remove(pictureInfoUrl.Length - 1, 0);
                    ColumnPicture picture = new ColumnPicture()
                    {
                        Id = CombHelper.NewComb(),
                        PictureTitle = pictureName,
                        PictureTitleDescription = pictureInfoUrl,
                        GoodClickTimes = 888,
                        BadClickTimes = 10,
                        AddDate = DateTime.Now,
                        FavoriteTimes = 888,
                        IsEnabled = true,
                        ToTop = 0,
                        CustomerKey = ((Customer)Session[Consts.SYSTEMUERSESSION]).Id,
                        ColumnsCategoryKey = new Guid(pictureCategoryKey)
                    };
                    if (_pictureService.Insert(picture))
                    {
                        fileUpLoadPicture = new FileUpLoadResult()
                        {
                            Status = true,
                            FileSavePath = null,
                            ErrorMsg = ""
                        };
                    }
                }
                #endregion

                return Json(fileUpLoadPicture, JsonRequestBehavior.AllowGet);
            }
            return null;
        }