文章の目录
- 一、构造函数
- 1、FormData()
- 1.1、概述
- 1.2、语法
- 1.3、参数
- 1.4、示例
- 二、实例方法
- 1、append()
- 1.1、概述
- 1.2、语法
- 1.3、参数
- 1.4、返回值
- 2、delete()
- 2.1、概述
- 2.2、语法
- 2.3、参数
- 2.4、返回值
- 3、entries()
- 3.1、概述
- 3.2、语法
- 3.3、返回值
- 4、get()
- 4.1、概述
- 4.2、语法
- 4.3、参数
- 4.4、返回值
- 5、getAll()
- 5.1、概述
- 5.2、语法
- 5.3、参数
- 5.4、返回值
- 6、has()
- 6.1、概述
- 6.2、语法
- 6.3、参数
- 6.4、返回值
- 7、keys()
- 7.1、概述
- 7.2、语法
- 7.3、返回值
- 8、set()
- 8.1、概述
- 8.2、语法
- 8.3、参数
- 9、values()
- 9.1、概述
- 9.2、语法
- 9.3、返回值
- 三、set和append的区别
- 写在最后
一、构造函数
1、FormData()
1.1、概述
FormData() 构造函数用于创建一个新的 FormData 对象。
1.2、语法
var formData = new FormData(form);1.3、参数
- form【可选】
一个 HTML 上的<form>表单元素——当指定了，这种方式创建的 FormData 对象会自动将 form 中的表单值也包含进去，包括文件内容也会被编码之后包含进去。
1.4、示例
①、准备 HTML 表单
<form id="form">
<input type="text" name="username" />
<input type="password" name="password" />
<input type="button" />
</form>②、将 HTML 表单转化为 FormData 对象
var form = document.getElementById("form");
var formData = new FormData(form);转化成的表单数据为
{"username":"zhangsan","password":"123456"}二、实例方法
1、append()
1.1、概述
FormData 接口的 append() 方法会添加一个新值到 FormData 对象内的一个已存在的键中，如果键不存在则会添加该键。
1.2、语法
这个方法有两个版本：一个有两个参数的版本和一个有三个参数的版本。
formData.append(name, value);
formData.append(name, value, filename);1.3、参数
- name
value 中包含的数据对应的表单名称。 - value
表单的值。可以是 String 或 Blob (包括子类型，如 File)。 - filename 【可选】
传给服务器的文件名称 (一个 String)，当一个 Blob 或 File 被作为第二个参数的时候， Blob 对象的默认文件名是 “blob”。 File 对象的默认文件名是该文件的名称。
1.4、返回值
空
2、delete()
2.1、概述
FormData 接口的 delete() 方法会从 FormData 对象中删除指定键，即 key，和它对应的值，即 value。
2.2、语法
formData.delete(name);2.3、参数
- name
要删除的键（Key）的名字。
2.4、返回值
空
3、entries()
3.1、概述
entries() 方法返回一个 iterator 对象，此对象可以遍历访问 FormData 中的键值对。其中键值对的 key 是一个 String 对象；value 是一个 String，或者 Blob对象。
3.2、语法
formData.entries();3.3、返回值
返回 iterator。
4、get()
4.1、概述
get() 方法用于返回 FormData 对象中和指定的键关联的第一个值，如果你想要返回和指定键关联的全部值，那么可以使用 getAll() 方法。
4.2、语法
formData.get(name);4.3、参数
- name
将要获取值的键名。
4.4、返回值
String，或者 Blob对象
5、getAll()
5.1、概述
getAll() 方法会返回该 FormData 对象指定 key 的所有值。
5.2、语法
formData.getAll(name);5.3、参数
- name
将要获取值的键名。
5.4、返回值
String数组，或者 Blob对象数组
6、has()
6.1、概述
**has()**方法会返回一个布尔值，表示该FormData对象是否含有某个 key。
6.2、语法
formData.has(name);6.3、参数
- name
将要查询值的键名。
6.4、返回值
true或者false boolean值
7、keys()
7.1、概述
keys() 该方法返回一个迭代器（iterator），遍历了该 formData 包含的所有 key，这些 key 是 String 对象。
7.2、语法
formData.keys();7.3、返回值
返回一个迭代器（ iterator）。
8、set()
8.1、概述
set() 方法会对 FormData 对象里的某个 key 设置一个新的值，如果该 key 不存在，则添加。
8.2、语法
该方法有两种使用方式，一个是传入两个参数，一个是传入三个参数。
formData.set(name, value);
formData.set(name, value, filename);8.3、参数
- name
字段名称。 - value
字段的值，该值可以是一个 String 或 Blob（包括其子类，例如 File），如果不是这两个指定的类型，其将被转成一个字符串。 - filename 【可选】
当第二个参数传递的是一个 blob 对象（Blob）或者 file 对象（File），filename 参数就代表传给服务端的文件名（一个 String）。 Blob 对象的默认文件名是 “blob”，File 对象的默认文件名则为其“name”属性
9、values()
9.1、概述
values() 方法返回一个允许遍历该对象中所有值的 迭代器 。这些值是 String 或是Blob 对象。
9.2、语法
formData.values();9.3、返回值
返回一个迭代器。
三、set和append的区别
如果某个 key 已经存在，set() 会直接覆盖所有该 key 对应的值，而 append() 则是在该 key 的最后位置再追加一个值。
