FormData()构造函数用于创建一个新的FormData对象,通过参数form可以实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率。
语法
var formData = new FormData(form)
参数
form(可选)
一个HTML上的<form>表单元素——当指定了,这种方式创建的FormData对象会自动将form中的表单值也包含进去,包括文件内容也会被编码之后包含进去。
<form id="myForm" name="myForm">
<div>
<label for="username">Enter name:</label>
<input type="text" id="username" name="username">
</div>
<div>
<label for="useracc">Enter account number:</label>
<input type="text" id="useracc" name="useracc">
</div>
<div>
<label for="userfile">Upload file:</label>
<input type="file" id="userfile" name="userfile">
</div>
<input type="submit" value="Submit!">
</form>
注意: 所有的输入元素都需要有name属性,否则无法访问到值。
var myForm = document.getElementById('myForm');
formData = new FormData(myForm);
var xhr=new XMLHttpRequest();
xhr.open("post","http://127.0.0.1/adv");
xhr.send(formData);
xhr.onload=function(){
if(xhr.status==200){
//...
}
}
浏览器兼容:IE10+。
需要form表单控件name与value快速拼接浏览器全兼容的,可以试试下面这个:
function serialize(form){
const elements = form.elements;
let i = elements.length - 1;
let arry = [];
for(;elements[i]; i--){
const input = <HTMLInputElement>elements[i];
switch(input.type){
case undefined:
case 'button':
case 'submit':
break;
default:
if( input.name ){
arry.push( `${input.name}=${ encodeURIComponent(input.value)}` )
}
}
}
return arry.join('&');
}
serialize( document.getElementById('myForm') )
注意:serialize返回的是&拼接的一个字符串,如有需要返回对象请自行修改。