FormData 對象的使用

MDN 解釋

FormData對象用以將數據編譯成鍵值對，以便用XMLHttpRequest來發送數據。其主要用於發送表單數據，亦可用於發送帶鍵數據(keyed data)，而獨立於表單使用。

若是表單enctype屬性設爲multipart/form-data ，則會使用表單的submit()方法來發送數據，從而，發送數據具備一樣形式。

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); //數字123456會被當即轉換成字符串 "123456"
// HTML 文件類型input，由用戶選擇
formData.append("userfile", fileInputElement.files[0]);

// JavaScript file-like 對象var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);
var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);

上面的示例建立了一個FormData實例，包含"username", "accountnum", "userfile" 和 "webmasterfile"四個字段，而後使用XMLHttpRequest的send()方法發送表單數據。

字段 "webmasterfile" 是 Blob類型。一個 Blob對象表示一個不可變的, 原始數據的相似文件對象。Blob表示的數據不必定是一個JavaScript原生格式。 

File 接口基於Blob，繼承 blob功能並將其擴展爲支持用戶系統上的文件。你能夠經過 Blob() 構造函數建立一個Blob對象。

FormData對象用以將數據編譯成鍵值對，以便用XMLHttpRequest來發送數據。其主要用於發送表單數據，亦可用於發送帶鍵數據(keyed data)，而獨立於表單使用。

若是表單enctype屬性設爲multipart/form-data ，則會使用表單的submit()方法來發送數據，從而，發送數據具備一樣形式。

FormData的主要用途有兩個

1、將form表單元素的name與value進行組合，實現表單數據的序列化，從而減小表單元素的拼接，提升工做效率。

2、異步上傳文件

查看更多