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