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