FormData API

FormData API 接口提供了一种表示表单数据的键值对,并且将数据通过 XMLHttpRequest.send 方法发送出去。

基本用法

const formData = new FormData(form ? :HTMLFormElement);

参数

参数说明
form(可选)一个 HTML 表单元素,可以包含任何形式的表单控件,包括文件输入框

方法

属性说明
FormData.append()为 FormData 添加新的属性值
FormData.set()设置 FormData 中属性值
FormData.has()判断 FormData 中是否包含某个键
FormData.get()获取 FormData 中指定键关联的值
FormData.getAll(name)获取 FormData 中指定键关联的所有值的数组
FormData.delete()删除 FormData 中指定的键值对
FormData.entries()获取 FormData 中所有键值对
FormData.keys()获取 FormData 中键名组成难过的数组
FormData.values()获取 FormData 中键值组成的数组

应用示例

使用已有的表单来初始化一个对象实例。假如现在页面已经有一个表单。

<form id="file" action="" method="post">
<input type="text" name="name" />名字 <input type="password" name="psw" />密码
<input type="submit" value="提交" />
</form>

我们可以使用这个表单元素作为初始化参数,来实例化一个 FormData 对象。

// 获取页面已有的一个 form 表单
const form = document.getElementById('file');
// 用表单来初始化
const formData = new FormData(form);
// 我们可以根据 name 来访问表单中的字段
// 获取名字
const name = formData.get('name');
// 获取密码
const psw = formData.get('psw');
// 当然也可以在此基础上,添加其他数据
formData.append('token', 'kshdfiwi3rh');