• 系列文章申明

• 原文

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