FormData表单序列化

最新推荐文章于 2024-08-09 21:54:00 发布

小贤_log

最新推荐文章于 2024-08-09 21:54:00 发布

阅读量1.9k

点赞数

分类专栏：前端页面文章标签： jquery ajax html

本文链接：https://blog.youkuaiyun.com/zxh_log4j/article/details/105554559

版权

前端页面专栏收录该内容

5 篇文章

订阅专栏

当使用ajax处理包含文件的表单时，不能单纯使用serialize。此时，FormData成为了解决问题的关键。FormData允许我们将表单数据，包括文件，序列化以便通过ajax提交。创建FormData对象，设置jQuery.ajax参数，如`cache: false`、`processData: false`和`contentType: false`，然后可以将表单对象或以键值对形式添加到formData中。提交时，将formData作为data参数即可。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我们用ajax提交表单时，通常用的都是serialize对表单进行序列化。

但是有了文件标签type='file'时，用serialize进行序列化，就会有问题了

解决表单有文件时序列化的方法，就是用FormData

下面来说下FormData怎么用：

FormData用法

实例化了一个空的FormData对象，可以认为它就是一个form表单，但现在里面什么控件都没有。
```
var formData = new FormData(); 
```
1. 可直接放表单对象序列化，自动封装对象对象为DOM对象
```
var formData = new FormData($("#subForm")[0]);
```
1. 给实例化的formdata对象添加一个控件，注意这里添加的是表单已写有input标签的
```
<input type="file" name="myfile">
```
```
formData.append('myfile', $('input[name=myfile]')[0].files[0]);
```
1. 没用表单时，以“键-值”对的形式给FormData添加控件，注意第3个参数“上传文件名”是可选的
```
FormData.append(name, value, filename);
```
1. 将实例化的formData作为jQuery.ajax()方法data参数的值传递进去，提交给后端服务器
注意的是以下三个参数不可少
```
cache: false,
processData: false,
contentType: false,
```
cache设置为false，上传文件不需要缓存。

processData参数，根据jQuery.ajax()文档中的解释，默认情况下，jQuery会处理发送的数据，将数据按照’application/x-www-form-urlencoded’的要求转换为查询字符串，如果要发送的数据是DOMDocument或者不需要处理，就可以设置为false不让jQuery转换数据，我们这里要发送的数据其实就是DOMDocument。

contentType设置为false。因为是由form表单构造的FormData对象，且已经声明了属性***enctype=“mutipart/form-data”***，所以这里设置为false。

FormData代码例子

一、有表单

ajax用var formData = new FormData($("#subForm")[0]);

<form id= "Form" enctype="multipart/form-data">
		......
</form>

function ajaxSubmit(){
		var url = "提交路径";
		//有文件上传，所以使用FormData装载表单
		//serialize()不序列化上传的文件
		var formData = new FormData($("#Form")[0]);
		$.ajax({
			url : url,
			type: 'POST',
	        data: formData,
	        cache: false,
	        processData: false,
	        contentType: false,
	        success: function (data) {
	            alert(data);
	        }

二、没有表单

var oMyForm = new FormData();
    oMyForm.append("userName", "Groucho");
    oMyForm.append("accountnum", 123456); 
    oMyForm.append("file", $('#file')[0].files[0]);	

$.ajax({
    url: '提交路径',
    type: 'POST',
    data: oMyForm,
    cache: false,
    processData: false,
    contentType: false,
    success:function(data){
        alert(data);
}