$("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')[]);//序列化表单,$("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 - , );
ColumnPicture picture = new ColumnPicture()
{
Id = CombHelper.NewComb(),
PictureTitle = pictureName,
PictureTitleDescription = pictureInfoUrl,
GoodClickTimes = ,
BadClickTimes = ,
AddDate = DateTime.Now,
FavoriteTimes = ,
IsEnabled = true,
ToTop = ,
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;
}

关于jquery的 $("form").serialize()和 new FormData表单序列化的更多相关文章

  1. (转)jquery serialize表单序列化,当radio或checkbox 未选中时,没有序列化到对象中的原因分析和解决方案 - ghostsf

    相信很多人都用过jq的表单序列化serialize()方法,因为这能很方便地帮你把表单里所有的非禁用输入控件序列化为 key/value 对象,不需要你再去一个个地拼接参数了. 这是一个很好用的函数, ...

  2. jQuery实现form表单序列化转换为json对象功能示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. jquery ajax(5)form表单序列化

    form表单序列化<script type="text/javascript"> $(function(){ $("#send").click(fu ...

  4. 原生JS实现表单序列化serialize()

    有一个form表单,要用AJAX后台提交,原来想拼接json,但是数据多了麻烦,不灵活. 用HTML5的FormData来初始化表单 var formdata=new FormData(documen ...

  5. 将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name&value>格式和JSON格式。

    http://zhengxinlong.iteye.com/blog/848712 将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name& ...

  6. 原生js实现form表单序列化

    当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼:我们一起用原生来写一个表单序 ...

  7. js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么

    js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么 一.总结 一句话总结:两者都是对表单进行序列化,serializeArray()返回的是json ...

  8. Jquery表单序列化和AJAX全局事件

    Jquery表单序列化 1.必须放在form标签内: 2.控件必须有name属性: 3.控件的value值会提交到服务器: 如: <form id="form1"> & ...

  9. jQuery UI 对话框(Dialog) - 模态表单

    <!doctype html><html lang="en"><head> <meta charset="utf-8" ...

随机推荐

  1. Two shortest

    sgu185:http://acm.sgu.ru/problem.php?contest=0&problem=185 题意:找两条最短路径,没有边相交的最短路劲,并且输出路径. 题解:这一题和 ...

  2. KeilC51常用功能模块使用说明

    本文档包括单片机系统中常用到的时钟中断.通讯及键盘扫描等模块(见所附源程序)的说明.这些模块使用前后台系统模型.为达到最大的灵活性, 需要在用户工程中定义config.h文件, 在其中定义各模块可选参 ...

  3. bzoj2002

    这道题学习了一种简洁的解决一些数据结构题的方法——分块法这道题方法很多,但分块写起来只有1kb左右,非常的简洁(但不是非常的高效)首先很容易思考到一种暴力的做法,从后往前推,很容易搞出每个点会弹几次弹 ...

  4. DOS - COPY

    copy,中文含义为"复制",一个很容易见名知意的命令,它的作用是复制文件,用法十分简单:copy 源文件 目的路径.   假设,你需要把d:\test\test.txt这个文件复 ...

  5. 【转】蓝牙4.0BLE cc2540 usb-dongle的 SmartRF Packet Sniffer 抓取数据方法--不错

    原文网址:http://blog.csdn.net/mzy202/article/details/32408223 蓝牙4.0BLE cc2540 usb-dongle的 SmartRF Packet ...

  6. oracle查询语句【转载】

    建立的表: 表名:REGIONS 序号 列名 数据类型 长度 小数位 标识 主键 允许空 默认值 说明 1 REGION_ID NUMBER 是 否 2 REGION_NAME VARCHAR2 25 ...

  7. Redis教程02——管道(Pipelining)

    请求/响应协议和RTT Redis是一个使用客户端/服务器模型(也被称作请求/响应协议)的TCP服务器. 这说明通常来讲一个一个请求的实现有以下步骤: 客户端发送请求到服务器,并从socket中以堵塞 ...

  8. SQL 查询条件放在LEFT OUTER JOIN 的ON语句后与放在WHERE中的区别

    这两种条件放置的位置不同很容易让人造成混淆,以致经常查询出莫名其妙的结果出来,特别是副本的条件与主表不匹配时,下面以A,B表为例简单说下我的理解. 首先要明白的是: 跟在ON 后面的条件是对参与左联接 ...

  9. intelij idea

    tip of day关闭后可以在左上角的help中找到

  10. jump_ur.php通知模板

    <title>出错啦~~~</title> <script language="javascript" type="text/javascr ...