关于FormData

FormData对象

是什么

现代 Web 应用中频繁使用的一项功能就是表单数据序列化，XMLHttpRequest 2 级为此定义了 FormData 类型，FormData 为序列化表单以及创建与表单格式相同的数据（通过 JS 来模拟表单键值对）提供了便利。

我理解为：FormData 是为了让JS模拟表单提交而创造出来的一种，表示表单数据的键值对 key/value 的构造方式。

创建 FormData

1. 创建一个空对象实例：

var formData = new FormData();

2. 基于现有表单来初始化一个对象实例：

<form id="myForm" action="" method="post">
    <input type="text" name="name">
    <input type="password" name="password">
    <input type="submit" value="提交">
</form>

// 获取现有form元素
const myForm = document.querySelector('#myForm');
// 基于form元素初始化FormData实例
const formData = new FormData(form);

方法

方法	作用	用法
append	添加一个新值到 FormData 对象内的一个已存在的键中，如果键不存在则会添加该键 。可以使用同一个名称添加多个值。	formData.append(key,value,[fileName])
set	对 FormData 对象里的某个 key 设置一个新的值，如果该 key 不存在，则添加。	formData.set(key,value,[fileName])
get	返回FormData对象中和指定的键关联的第一个值（如果希望返回多个，用 getAll）	formData.get(key)
getAll	返回 FormData 对象指定 key 的所有值	formData.getAll(key)
delete	从 FormData 对象中删除指定键，即 key，和它对应的值，即 value。	formData.delete(key,value)
entries	返回一个 迭代器（iterator对象） ，此对象可以遍历访问FormData中的键值对。	formData.entries()
keys	返回一个允许遍历该对象中所有key的迭代器。这些值是 USVString	formData.keys()
values	返回一个允许遍历该对象中所有值的迭代器。这些值是 USVString 或是Blob 对象。	formData.values()
has	返回一个布尔值，表示该FormData对象是否含有某个key	formData.has(key)

• 赋值方法：append、set
• 删除方法：delete
• 取值方法：get、getAll
• 遍历方法：entries 、keys 、values
• 判断方法：has

值得一提

Q1：FormData.set 和 FormData.append 的区别

首先我们要知道，在FormData中，一个key可能对应多个value：

key	value
k1	[v1,v2,v3]
k2	v4

set 和 append 的区别在于，如果指定的键已经存在， set 会使用新值覆盖已有的值，而 append 会把新值添加到已有值集合的后面。举例说明：

// 创建一个formData对象
var formData = new FormData();

// 对 key1 进行 set 操作
formData.set('key1', 'value1');
formData.set('key1', 'value2');

// 对 key2 进行 append操作
formData.append('key2', 'value1');
formData.append('key2', 'value2');
formData.append('key2', 'value3');

// 使用 getAll 方法分别获取 key1, key2
formData.getAll('key1'); // ["value2"]
formData.getAll('key2'); // ["value1", "value2", "value3"]

Q2： 迭代器（iterator对象）的使用
对于返回迭代器的方法（如 entries、keys、values），可以使用 for…of… 方法遍历该 iterator对象。该特性可用于查看 FormData 里的数据（键值对）。

// 创建一个formData对象
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// 查看 formData 里的键值对
for (let [key,value] of formData.entries()){
    
    
	console.log(key + "," +value)
}

执行结果为：

key1, value1
key2, value2

Q3: 其实 FormData 对象本身就可以直接在 for…of… 结构中使用，而不需要调用entries()

// 创建一个formData对象
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// 查看 formData 里的键值对
for (let [key,value] of formData){
    
    
	console.log(key + "," +value)
}

执行结果：

key1, value1
key2, value2

即 for (let item of myFormData) 的作用和 for (let item of myFormData.entries()) 是相同的。

Q4: 获取FormData中的数据

• 使用 formData.get(key)、formData.getAll(key) 可以获取指定键对应的值；
• 使用 for...of 访问 formData 中的所有键值对，也就是 Q2、Q3 中提到的方法。

Q5: 原生<form>提交表单数据 与 XHR提交FormData
在普通的表单提交中，Content-Type默认为 application/x-www-form-urlencoded。传输文件类型的数据，则需要配置 enctype 为 multipart/form-data 。

使用 XMLHttpRequest 发送 FormData 数据时，浏览器则会自动识别并添加请求头"Content-Type: multipart/form-data"。

---

参考链接：
MDN：https://developer.mozilla.org/zh-cn/docs/web/api/formdata/formdata
Html5——File、FileReader、Blob、Fromdata对象
AlbenXie：FormData对象的作用及用法
huangpb0624：Blob、File、FileReader 和 Data URL