异步上传文件使用new FormData($(‘#uploadForm‘)[0])序列化表单

来源:互联网 发布:瓷砖一开四加工费算法 编辑:程序博客网 时间:2024/06/05 06:05

关于jquery的 $("form").serialize()和 new FormData表单序列化


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

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

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

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

另外该对象不仅仅可以序列化文件,一样可以用作表单数据的序列化,(就是说包含了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); }                }            });  注意红色部分脚本以及说明, processData: false, contentType: false,缺少这二者的设置,将会出现  红色部分的错误提示,提交失败。以下是一个完整的前后台的参考脚本://提交文件    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 = ""                        };                    }                }                #endregionreturn Json(fileUpLoadPicture, JsonRequestBehavior.AllowGet);            }            return null;        }
阅读全文
0 0