FormData 对象
Galloping_Leo 2020-01-20 JavaScript
# FormData 对象
注意
FormData 对象存在兼容性问题，老版本浏览器不兼容。
# 作用
- 模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。
- 异步上传二进制文件
# 使用
HTML 表单
<form id="form">
<input type="text" name="username" />
<input type="password" name="password" />
<input type="button"/>
</form>
1
2
3
4
5
2
3
4
5
将 HTML 表单转化为 formData 对象
var form = document.getElementById('form');
var formData = new FormData(form);
1
2
2
提交表单对象
xhr.send(formData)
1
注意
Formdata对象不能用于 get 请求，因为对象需要被传递到 send方法中，而 get 请求方式的请求参数只能放在请求地址的后面。服务器端 bodyParser模块不能解析 formData 对象表单数据，我们需要使用 formidable 模块进行解析
案例
客户端
<!-- 创建普通的html表单 -->
<form id="form">
<input type="text" name="username">
<input type="password" name="password">
<input type="button" id="btn" value="提交">
</form>
<script>
var form = document.getElementById('form')
var btn = document.getElementById('btn')
btn.onclick = function () {
var formData = new FormData(form)
var xhr = new XMLHttpRequest()
xhr.open('post', 'http://localhost:3000/formData')
xhr.send(formData)
xhr.onload = function () {
if(xhr.status == 200) {
console.log(xhr.responseText)
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
服务端
app.post('/formData', (req, res) => {
// 创建formidable表单解析对象
const form = new formidable.IncomingForm();
// 解析客户端传递过来的FormData对象
form.parse(req, (err, fields, files) => {
res.send(fields)
})
})
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# FormData 的实例方法
# 获取对象中的属性值
formData.get(key) //key 为表单控件的name值
1
# 设置属性值
formData.set(key, value)
1
注意
如果formaData.set传入的key属性不存在那么就创建该属性并赋值为value，如果存在就修改它的值为传入的value
# 删除属性值
应用场景：注册时要求填写两次密码，但是只需要提交一个密码控件的值。
formData.delete(key)
1
# 像表单中追加属性
formData.append(key, value)
1
注意
set 方法与 append 方法的区别是，在属性名已存在的情况下，set 会覆盖已有键名的值，append会保留两个值。
