JavaScript FormData:数据提交与文件上传
一 、简介
我们经常需要向服务器发送数据。而在前端,我们可以使用FormData对象来方便地收集和发送数据。FormData是一个用于构建表单数据的JavaScript对象,可以将数据序列化为键值对的形式,然后发送到服务器。
二、FormData的使用
1.创建一个FormData对象
const formdata=new FormData()
2.FormData的方法
通过输出这个新创建的对象,我们就可以看到这个对象内置的方法
console.log(formdata);
(1)append(key,value)
以名值对的形式向对象中添加值。如果key已经存在,后添加的新值将与旧值一起作为集合形式保存。
formdata.append('name','张三')
formdata.append('name','李四')
(2)get(key)
获取该name对应的value集合中添加的第一个值。
console.log(formdata.get('name'));//张三
(3)getAll(key)
获取该name对应的value集合。按添加顺序输出。
console.log(formdata.getAll('name'));//['张三', '李四']
(4)set(key,value)
与append类似,但使用该方法添加值,如果key之前已经存在,那么会用新的value覆盖调所有旧value的集合。
formdata.set('name','王五')
console.log(formdata.getAll('name'));//['王五']
(5)delete(key)
删除key对应的所有value
formdata.delete('name')
console.log(formdata.get('name'));//null
(6)entries()
获取一个由对象所有key和value组成的iterator迭代器对象。需要通过for of的形式遍历,每个元素都是一个数组,数组中包括两个元素,分别为key和value。如果一个key对应多个value,那么key会被遍历多次,但每次只对应一个value。
const formdata=new FormData()
formdata.append('name','张三')
formdata.append('name','李四')
formdata.append('age',12)
const fdentries=formdata.entries()
for (var ele of fdentries) {
console.log( ele);
}
(7)keys()
获取一个由对象所有key组成的iterator迭代器对象。遍历方法与entries()相同,但类型为String。与entries一样,如果一个key对应多个value,那么key会被遍历多次,但每次只对应一个value。
const formdata=new FormData()
formdata.append('name','张三')
formdata.append('name','李四')
formdata.append('age',12)
const fdkeys=formdata.keys()
for (var ele of fdkeys) {
console.log( ele);
}
(8)values()
获取一个由对象所有value组成的iterator迭代器对象。遍历方法与entries()相同,但类型为String 、File、Blob。与entries一样,如果一个key对应多个value,那么value会被遍历多次。
const formdata=new FormData()
formdata.append('name','张三')
formdata.append('name','李四')
formdata.append('age',12)
const fdvalues=formdata.values()
for (var ele of fdvalues) {
console.log( ele);
}
(9)has(key)
判断对象中是否有对应的key
const formdata=new FormData()
formdata.append('name','张三')
formdata.append('name','李四')
formdata.append('age',12)
console.log(formdata.has('name'));//true
console.log(formdata.has('age'));//true
console.log(formdata.has('address'));//false



