FormData 對象的使用

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

 http://www.jianshu.com/p/46e6e03a0d53

通過FormData對象可以組裝一組用 XMLHttpRequest發送請求的鍵/值對。它可以更靈活方便的發送表單數據，因為可以獨立於表單使用。如果你把表單的編碼類型設置為multipart/form-data ，則通過FormData傳輸的數據格式和表單通過submit() 方法傳輸的數據格式相同

如何創建一個FormData對象

你可以自己創建一個FormData對象，然后通過調用它的append()方法添加字段，就像這樣：

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

 

注意：字段 "userfile" 和 "webmasterfile"  都包含一個文件. 字段 "accountnum" 是數字類型，它將被 FormData.append()方法轉換成字符串類型( FormData 對象的字段類型可以是  Blob,  File, 或者 string:  如果它的字段類型不是Blob也不是File，則會被轉換成字符串類型。

上面的示例創建了一個FormData實例，包含"username", "accountnum", "userfile" 和 "webmasterfile"四個字段，然后使用XMLHttpRequest的send()方法發送表單數據。字段 "webmasterfile" 是 Blob類型。一個 Blob對象表示一個不可變的, 原始數據的類似文件對象。Blob表示的數據不一定是一個JavaScript原生格式。 File 接口基於Blob，繼承 blob功能並將其擴展為支持用戶系統上的文件。你可以通過 Blob() 構造函數創建一個Blob對象。

通過HTML表單創建FormData對象

想要構造一個包含Form表單數據的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));

 

還可以在創建一個包含Form表單數據的FormData對象之后和發送請求之前，附加額外的數據到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);

 

這樣你就可以在發送請求之前自由地附加不一定是用戶編輯的字段到表單數據里

使用FormData對象上傳文件

你還可以使用FormData上傳文件。使用的時候需要在表單中添加一個文件類型的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對象是通過表單創建的，則表單中指定的請求方式會被應用到方法open()中 。

你還可以直接向FormData對象附加File或Blob類型的文件，如下所示：

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

 

使用appned()方法時，可以通過第三個可選參數設置發送請求的頭 Content-Disposition 指定文件名。如果不指定文件名（或者不支持該參數時），將使用名字“blob”。

如果你設置正確的配置項，你也可以通過jQuery來使用FormData對象：

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,  // 不處理數據
  contentType: false   // 不設置內容類型
});

 

通過AJAX提交表單和上傳文件可以不使用FormData對象

如果你想知道不使用FormData對象的情況下，通過AJAX序列化和提交表單 請點擊這里。

相關鏈接

• Using XMLHttpRequest
• HTMLFormElement
• Blob
• Typed Arrays