【譯】使用FormData對象

• 系列文章說明

• 原文

FormData對象能讓你生成一系列用於XMLHttpRequest發送的鍵值對。它主要的目的在於發送表單數據，但也能獨立用於傳輸有鍵形式的數據。其傳輸的數據格式和表單使用submit()方法、且編碼類型爲multipart/form-data所發送的數據格式相同。

從頭開始建立一個FormData對象

你能夠本身創建一個FormData對象，首先進行實例化、再經過apppend()方法來添加字段，以下所示：

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); // 數字123456會自動轉爲字符串"123456"

// 用戶選擇的HTML的文件提交
formData.append("userfile", fileInputElement.files[0]);

// JavaScript的類文件對象（Blob）
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);

注意：「userfile」字段和「webmasterfile」字段都包含了文件。「accountnum」字段中的數字會自動被FormData.append()方法自動轉爲字符串。（字段值能夠是一個Blob、File或字符串，若值不是Blob、File之一，就會被轉爲字符串）

上面的例子創建了一個包含名爲「username」、「accountnum」、「userfile」和「webmasterfile」字段的FormData對象。而後使用了XMLHttpRequest的send()方法來發送表單數據。「webmasterfile」字段是個Blob對象，該對象表明了一個由不可變的、原始數據組成的類文件對象，裏面的的數據沒必要使用JavaScript的原生數據類型。File對象也是基於Blob對象的，它繼承了Blob的基本功能並作了拓展以支持用戶操做系統上的文件。要創建一個Blob對象，你能夠使用Blob構造函數。

用HTML表單中建立一個FormData對象

要用現有的<form>元素創建一個FormData對象，能夠在創建FormData對象時傳入指定的<form>元素。

var formData = new FormData(someFormElement);

舉個例子：

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

在用<form>元素創建FromData對象以後、發送它以前，也能夠給它添加額外的數據，以下：

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

這樣一來咱們就能在發送表單數據前進行配置，以添加一些不需用戶編輯的信息。

用FormData對象發送文件

你也能夠用FormData對象發送文件，只需在你的<form>標籤間包含一個file類型的<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);

注意：若你傳入了一個表單的引用，那麼表單指定的方法（譯註：應指Post、Get）會覆蓋open()方法調用時指定的。

你也能夠直接添加File或Blob到FormData對象，以下：

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

使用append()方法時，使用第三個可選的參數會指定一個文件名，用於請求頭的Content-Disposition字段。若沒有指定文件名（或者該參數不被支持），那就默認使用「blob」這個名字。

經過AJAX提交表單和發送文件而不使用FormData對象

若你想了解如何基於AJAX進行序列化和發送表單操做，而不使用FormData對象，可閱讀此文。

參見

Using XMLHttpRequest
HTMLFormElement
Blob
Typed Arrays