关于jquery的 $("form").serialize()和 new FormData表单序列化
发布日期:2021-08-17 00:52:24 浏览次数:37 分类:技术文章

本文共 4419 字,大约阅读时间需要 14 分钟。

$("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); }                }            });        });    }
///         ///     上传新图片,(包含文件上传)        ///         /// 
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; }

 

 

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

转载地址:https://blog.csdn.net/weixin_30825199/article/details/99232175 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:ZJUTACM(hd1259)
下一篇:jpg图片转换为yuv

发表评论

最新留言

哈哈,博客排版真的漂亮呢~
[***.90.31.176]2024年04月04日 23时43分22秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

数据挖掘与数据分析(三)—— 探索性数据分析EDA(多因子与复合分析) & 可视化(1)—— 假设检验(μ&卡方检验&方差检验(F检验))&相关系数(皮尔逊&斯皮尔曼) 2019-04-30
RRT算法(快速拓展随机树)的Python实现 2019-04-30
路径规划(二) —— 轨迹优化(样条法) & 局部规划(人工势能场法) & 智能路径规划(生物启发(蚁群&RVO) & 强化学习) 2019-04-30
D*算法 2019-04-30
强化学习(四) —— Actor-Critic演员评论家 & code 2019-04-30
RESTful API 2019-04-30
优化算法(四)——粒子群优化算法(PSO) 2019-04-30
数据挖掘与数据分析(三)—— 探索性数据分析EDA(多因子与复合分析) & 可视化(2)——回归分析(最小二乘法&决定系数&残差不相关)&主成分分析&奇异值分解 2019-04-30
数据在Oracle中的存储 2019-04-30
优化算法(五)—人工蜂群算法Artificial Bee Colony Algorithm(ABC) 2019-04-30
轨迹规划 trajectory planning 2019-04-30
AGV自动导引运输车 2019-04-30
Trie树(字典树) 2019-04-30
COMP7404 Machine Learing——Logistic Regression 2019-04-30
COMP7404 Machine Learing——Regularization(参数C) 2019-04-30
COMP7404 Machine Learing——KNN 2019-04-30
COMP7404 Machine Learing——SVM 2019-04-30
COMP7404 Machine Learing——Decision Tree & Random Forests 2019-04-30
COMP7404 Machine Learing——Hyperparameter Grid Search & Nested Cross-Validation 2019-04-30
COMP7404 Machine Learing——Confusion Matrix & Precision/Recall/F1 2019-04-30