JavaScript FormData的詳細介紹及使用

FormData的詳細介紹及使用請點選此處，那裡對FormData的方法和事件已經表述的非常清楚，這裡就不再浪費時間在介紹一遍了。本文主要針對FormData物件的使用以及非同步檔案上傳進行詳細的說明。

 

FormData物件可以讓我們組織一個使用XMLHttpRequest物件傳送的鍵值對的集合。它主要用於傳送表單資料,但是可以獨立於使用表單傳輸的資料。

一、從頭開始建立一個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 userformData.append("userfile", fileInputElement.files[0]);// JavaScript file-like objectvar 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);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

 

注意：欄位”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()建構函式。

二、從一個HTML表單獲得一個FormData物件

為了獲得一個包含已存在表單資料的FormData物件，在建立FormData物件的時候需要指定表單元素。

var formData = new FormData(someFormElement);

• 1

就像下面這樣：

var formElement = document.querySelector("form");var request = new XMLHttpRequest();request.open("POST", "submitform.php");request.send(new FormData(formElement));

• 1
• 2
• 3
• 4

你也可以在獲得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);

• 1
• 2
• 3
• 4
• 5
• 6

這樣你可以在傳送之前增加額外的資訊，不一定是使用者編輯的。

三、使用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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

然後你可以使用下面的程式碼去傳送：

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);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

你也可以直接向FormData物件中新增File或Blob，就像下面這樣：

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

• 1

當使用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});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9