zoukankan      html  css  js  c++  java
  • 关于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 = ""
                            };
                        }
                    }
                    #endregion
    
                    return Json(fileUpLoadPicture, JsonRequestBehavior.AllowGet);
                }
                return null;
            }

     

  • 相关阅读:
    IE里ActiveXObject的一些实践
    JS兼容性问题汇总
    js:apply/call
    mark 一些近来用过的js库
    (转)时序分析基本概念
    (转载) 使用TimeQuest时序分析器
    (转)Altera对应的时序概念
    有序符号表(二叉树实现,JAVA,算法(四))
    有序符号表(数组实现,JAVA,算法(四),二分法)
    无序符号表(链表实现,JAVA,算法(四))
  • 原文地址:https://www.cnblogs.com/Tmc-Blog/p/5097320.html
Copyright © 2011-2022 走看看