FormData
主要用于表单提交,通过键值对的方式存储数据,以便将数据通过XMLHttprequest发送,发送请求时直接将formData对象发送即可
创建
通过FormData构造函数实例化一个formData对象,参数为可选的表单DOM实例,该对象实现了迭代器协议,可以通过for..of直接遍历
const formData = new FormData()
// new FormData(formDOM) 会自动将表单中的元素值包含进去,以元素name属性值为键,以元素输入值为值的键值对
赋值
formData对象有三种添加数据方式
通过append()方法
append方法添加数据时,如果该键已经存在那么将会把新值添加到已有的值的后面,
formData.append([name],[value],[filename])
name: 键名
value: 值,可以是String或者Blob
filename: 可选
创建一个formData对象,并添加usename数据
const formData = new FormData()
formData.append('username','张三')
通过set方法
set方法和append方法用法相同唯一的区别在于: 添加新值的时候,如果键名已经存在将使用新值覆盖旧值
通过HTML表单
通过将表单的DOM对象作为FormData的参数,formData对象自动包含对应的值
需要注意的是需要给form标签添加文件类型属性enctype="multipart/form-data"
<form enctype="multipart/form-data" method="post" name="fileinfo">
<input name="name" />
</form>
<button>
点击
</button>
<script>
const oForm = document.querySelector("form");
const obutton = document.querySelector("button");
obutton.addEventListener("click", function () {
const formData = new FormData(oForm);
console.log("formData:", formData.get("name"));
//发送请求等操作.....
});
</script>
取值
通过get方法获取和指定的键关联的第一个值,如果想要返回和指定键关联的所有值,请使用getAll方法
formData.get([name])
name: 键名
键名不存在返回null
其他方法
-
has()
返回布尔值,表示是否具有指定的key
-
values()
返回一个允许遍历该对象中所有值的
迭代器这些值是string或是Blob对象。 -
keys()
返回一个迭代器
iterator，遍历了该 formData 包含的所有 key，这些 key 是String。 -
delete()
从
FormData对象中删除指点的 key包括对应的value。
