FormData对象

经过FormData对象能够组装一组用 发送请求的键/值对。
它能够更灵活方便的发送表单数据，由于能够独立于表单使用。
若是你把表单的编码类型设置为multipart/form-data ，则经过FormData传输的数据格式和表单经过 方法传输的数据格式相同。

XMLHttpRequestsubmit()

1、建立一个空对象实例

你能够本身建立一个FormData对象，而后经过调用它的append()方法添加字段，就像这样：

 1 var formData = new FormData();
 2 
 3 formData.append("username", "Groucho");
 4 formData.append("accountnum", 123456); // 数字 123456 会被当即转换成字符串 "123456"
 5 
 6 // HTML 文件类型input，由用户选择
 7 formData.append("userfile", fileInputElement.files[0]);
 8 
 9 // JavaScript file-like 对象
10 var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
11 var blob = new Blob([content], { type: "text/xml"});
12 
13 formData.append("webmasterfile", blob);
14 
15 var request = new XMLHttpRequest();
16 request.open("POST", "http://foo.com/submitform.php");
17 request.send(formData);

注意：FormData 对象的字段类型能够是 Blob, File, 或者 string:若是它的字段类型不是Blob也不是File，则会被转换成字符串类型。因此字段 "accountnum" 是数字类型，它将被FormData.append()方法转换成字符串类型 。

 

上面的示例建立了一个FormData实例，包含"username", "accountnum", "userfile" 和 "webmasterfile"四个字段，而后使用XMLHttpRequest的send()方法发送表单数据。

字段 "webmasterfile" 是 Blob类型。一个 Blob对象表示一个不可变的, 原始数据的相似文件对象。Blob表示的数据不必定是一个JavaScript原生格式。 File 接口基于Blob，继承 blob功能并将其扩展为支持用户系统上的文件。你能够经过 Blob() 构造函数建立一个Blob对象。

 

2、经过HTML表单建立FormData对象

想要构造一个包含Form表单数据的FormData对象，须要在建立FormData对象时指定表单的元素。

你还能够在建立一个包含Form表单数据的FormData对象以后和发送请求以前，附加额外的数据到FormData对象里。这样你就能够在发送请求以前自由地附加不必定是用户编辑的字段到表单数据里

1 var formElement = document.querySelector("form");
2 var formData = new FormData(formElement);
3 var request = new XMLHttpRequest();
4 request.open("POST", "submitform.php");
5 formData.append("serialnumber", serialNumber++);
6 request.send(formData);

FormData 对象，能够把form中全部表单元素的name与value组成一个queryString，提交到后台。在使用Ajax提交时，使用FormData对象能够减小拼接queryString的工做量。

 

3、关于formData.append()方法

你还能够直接向FormData对象附加File或Blob类型的文件，以下所示：

data.append("myfile", myBlob, "filename.txt");

使用append()方法时，能够经过第三个可选参数设置发送请求的头 Content-Disposition 指定文件名。若是不指定文件名（或者不支持该参数时），将使用名字“blob”。

 

 

MDN参考：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

MDN资料：FormData() https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/FormData

segmentfault参考：http://www.javashuo.com/article/p-tiovbwqw-ka.html