formData对象用于组装表单数据,以键值对的形式存在。
方法
1、append()往值集中新增值
append(name, value, file)
append(name, value)
value可以是string,Blob,File,可以使用同一个名称添加多个值。
当一个 Blob 或 File 被作为第二个参数的时候, Blob 对象的默认文件名是 “blob”。 File 对象的默认文件名是该文件的名称。如果你指定一个 Blob 作为数据添加到 FormData 对象中, 文件名会被放在 “Content-Disposition” 头部(常常会根据浏览器变化而变化)传给服务器。
2、set()
如果没有新增一个键值,如果有则替换,而append是追加
formData.set(name, value);
formData.set(name, value, filename);
3、delete()
var formData = new FormData(myform);
formData.delete(name);
4、entries()
返回一个迭代器
var formData = new FormData(myform);
var pairs = formData.entries();
for(var pair of pairs) {
console.log(pair[0]+ ', '+ pair[1]);
}
5、get()
返回FormData对象中和指定的键关联的第一个值
var formData = new FormData();
formData.append('name', 'liyongfen');
formData.append('username', 'Chris');
formData.append('username', 'Bob');
var name = formData.get('name');//liyongfen
6、getAll()
返回和指定键关联的全部值
var formData = new FormData();
formData.append('name', 'liyongfen');
formData.append('username', 'Chris');
formData.append('username', 'Bob');
var name = formData.get('name');//['liyongfen','Chris','Bob']
7、has()
返回一个布尔值,表示该FormData对象是否含有某个key
// 先创建一个 FormData 对象
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
// 输出所有的 key
for (var key of formData.keys()) {
console.log(key);
}
8、values()
返回一个允许遍历该对象中所有值的迭代器
//创建一个FormData测试对象
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
//显示值
for (var value of formData.values()) {
console.log(value);
}
总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>formdata</title>
</head>
<body>
<form id="myform">
<input type="text" name="name" value="liyongen" />
<input type="file" name="files" multiple />
<textarea name="info"></textarea>
<input type="date" name="time" />
<button type="button" id="btn">按钮</button>
</form>
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.onclick = function(e){
var myform = document.getElementById('myform');
formdata = new FormData(myform);
//add update
formdata.append('name','shaozejun');
formdata.set('name','shaozejun2');
console.log(formdata.getAll('name'));
//del
formdata.delete('time');
//look
console.log(formdata.has('names'));
console.log(formdata.getAll('name'));
console.log(formdata.get('name'));
//for
for(var key of formdata.entries()){
console.log(key[0],key[1]);
}
for(var key of formdata.values()){
console.log(key);
}
for(var key of formdata.keys()){
console.log(key);
}
}
</script>
</body>
</html>