FormData用法详解

FormData的基本用法

• html代码（创建表单元素）

<form id='form>
	<input type='text' name='name' />名字
	<input type='password' name='password' />密码
</form>

• js代码（创建formData空对象）

// 创建formData空对象
var formData = new FormData()

• 如何根据form表单将表单数据一并添加到formData对象中呢？

// 根据form标签的ID，获取form表单元素
var myForm = document.getElementById('form')
// - var formData = new FormData()
// 将获得的表单元素作为参数，对formData进行初始化
var formData = new FormData(myForm)

FormData的常用方法

// 创建formData空对象
var formData = new FormData()

1. append
   append方法会添加一个新值到 FormData 对象内的一个已存在的键中，如果键不存在则会添加该键

// formData.append(name, value)
formData.append('username', 'Chris')

2. get
   get方法用于返回FormData对象中和指定的键关联的第一个值

// formData.get(name)
formData.append('username', 'Chris')
formData.append('username', 'Bob')

formData.get('username') // Chris

3. getAll
   getAll方法会返回该 FormData 对象指定 key 的所有值

// formData.getAll(name)
formData.append('username', 'Chris')
formData.append('username', 'Bob')

formData.getAll('username'); // ["Chris", "Bob"]

4. delete
   delete方法会从 FormData 对象中删除指定键，即 key，和它对应的值，即 value

// formData.delete(name)
formData.delete('username')

5. set
   set方法会对 FormData 对象里的某个 key 设置一个新的值，如果该 key 不存在，则添加

在这里我们可以看出 set append 的区别了（以下代码和2对比）

// formData.set(name, value)
formData.set('username', 'Chris')
formData.set('username', 'Bob')

formData.get('username') // Bob

6. has
   has方法会返回一个布尔值，表示该FormData对象是否含有某个key

// formData.has(name)
formData.has('username')