HTML里FormData對象的詳細說明

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

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

這個例子創(chuàng)建了一個FormData實例，其中包含字段”username”, “accountnum”, “userfile” 和 “webmasterfile”，然后使用XMLHttpRequest對象的send()方法去發(fā)送表單數據。字段”webmasterfile”是一個Blob。一個Blob對象代表一個文件對象的原始數據。但是Blob代表的數據不必須是javascript原生格式的數據。文件接口是基于Blob,繼承Blob功能和擴大它對用戶文件系統(tǒng)的支持。為了構建一個Blob可以調用Blob()構造函數。

從一個HTML表單獲得一個FormData對象

為了獲得一個包含已存在表單數據的FormData對象，在創(chuàng)建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);

這樣你可以在發(fā)送之前增加額外的信息，不一定是用戶編輯的。

三、使用FormData對象發(fā)送文件

你可以使用FormData發(fā)送文件。簡單的<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>

然后你可以使用下面的代碼去發(fā)送：

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() 方法的時候，可能會使用到第三個參數去發(fā)送文件名稱（通過Content-Disposition頭發(fā)送到服務器）。如果沒有指定第三個參數或這個參數不被支持的話，第三個參數默認是”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
});

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

用Js操作HTTP的Cookie的實現步驟

Js操作BOM對象模型的詳細介紹

在HTML的網頁布局里div與span有什么區(qū)別

以上就是HTML里FormData對象的詳細介紹的詳細內容，更多請關注php中文網其它相關文章！