JavaScript FormData的詳細介紹及使用

1、從頭開始建立一個FormData對象

你能夠建立一個你本身的FormData對象，而後經過append() 方法向對象中添加鍵值對，就像下面這樣：

　　var formData = new FormData();

　　formData.append("username", "Groucho");
　　formData.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456"

　　// HTML file input, chosen by user
　　formData.append("userfile", fileInputElement.files[0]);

　　// JavaScript file-like object
　　var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
　　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);
---------------------

注意：字段」userfile」 和 「webmasterfile」 都包含文件（file）。被分配到字段」accountnum」上的數字直接被FormData.append()方法轉換成了字符串（字段的值（value）多是一個Blob, File, 或一個string：若是值既不是Blob也不是File，則值會被轉換成一個string）。
---------------------

這個例子建立了一個FormData實例，其中包含字段」username」, 「accountnum」, 「userfile」 和 「webmasterfile」，而後使用XMLHttpRequest對象的send()方法去發送表單數據。字段」webmasterfile」是一個Blob。一個Blob對象表明一個文件對象的原始數據。可是Blob表明的數據沒必要須是javascript原生格式的數據。文件接口是基於Blob,繼承Blob功能和擴大它對用戶文件系統的支持。爲了構建一個Blob能夠調用Blob()構造函數。

2、從一個HTML表單得到一個FormData對象
爲了得到一個包含已存在表單數據的FormData對象，在建立FormData對象的時候須要指定表單元素。
---------------------
var formData = new FormData(someFormElement);

就像下面這樣：

var formElement = document.querySelector("form");
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));
---------------------
你也能夠在得到FormData對象以後增長另外的數據，就像下面這樣：

var formElement = document.querySelector("form");
var formData = new FormData(formElement);
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
formData.append("serialnumber", serialNumber++);
request.send(formData);
---------------------

3、使用FormData對象發送文件

你可使用FormData發送文件。簡單的<form>中在包含一個<input>元素就能夠：

<form enctype="multipart/form-data" method="post" name="fileinfo">
<label>Your email address:</label>
<input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
<label>Custom file label:</label>
<input type="text" name="filelabel" size="12" maxlength="32" /><br />
<label>File to stash:</label>
<input type="file" name="file" required />
<input type="submit" value="Stash the file!" />
</form>
<div></div>
---------------------
而後你可使用下面的代碼去發送：

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {

var oOutput = document.querySelector("div"),
oData = new FormData(form);

oData.append("CustomField", "This is some extra data");

var oReq = new XMLHttpRequest();
oReq.open("POST", "stash.php", true);
oReq.onload = function(oEvent) {
if (oReq.status == 200) {
oOutput.innerHTML = "Uploaded!";
} else {
oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>";
}
};

oReq.send(oData);
ev.preventDefault();
}, false);
---------------------
你也能夠直接向FormData對象中添加File或Blob，就像下面這樣：

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

當使用append() 方法的時候，可能會使用到第三個參數去發送文件名稱（經過Content-Disposition頭髮送到服務器）。若是沒有指定第三個參數或這個參數不被支持的話，第三個參數默認是」blob」。

若是你設置好正確的options，你也能夠和jQuery配合起來使用：

var fd = new FormData(document.querySelector("form"));fd.append("CustomField", "This is some extra data");$.ajax({ url: "stash.php", type: "POST", data: fd, processData: false, // tell jQuery not to process the data contentType: false // tell jQuery not to set contentType});