此功能已添加到 Mozilla Central（主干）中，目前仅适用于 Firefox Nightly Build。

XMLHttpRequest 2 级（编辑草案） 添加了对新 FormData 接口的支持。FormData 对象提供了一种简单的方法来构建一组表示表单字段及其值的键值对，然后可以使用 XMLHttpRequest send() 方法以“multipart/form-data”格式轻松发送这些键值对。

为什么使用 FormData？

当您想要从网页（文件、非 ASCII 内容）向服务器发送复杂数据时，必须使用 multipart/form-data 内容类型。要在 <form> 中设置内容类型，您需要编写

这通常是您用于上传文件的操作。

从 Firefox 3.6 开始，您可以使用 JavaScript 操作文件（请参阅 文件 API），并且您可能希望使用 XMLHttpRequest 发送文件。但是，例如，如果您想要复制此表单，这将非常困难，因为您必须在 JavaScript 中自己创建 multipart/form-data 内容（例如，请参阅 这段代码，我在一段时间前编写了它，用于实现 multipart/form-data：丑陋且速度慢）。

这就是 FormData 有用的地方：它可以再现 JavaScript 中的 <form> 提交机制

FormData 对象

FormData 对象允许您编译一组键值对，以便使用 XMLHttpRequest 发送这些键值对。此对象只有一个方法

append(key, value);

其中 key 是您的值的名称，value 可以是字符串或文件。

您可以创建一个 FormData 对象，追加值，然后通过 XMLHttpRequest 发送它。如果您想模拟前面的表单，您可以编写

// aFile could be from an input type="file" or from a Dragged'n Dropped file
var formdata = new FormData();
formdata.append("nickname", "Foooobar");
formdata.append("website", "https://hacks.mozilla.ac.cn");
formdata.append("media", aFile);
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://foo.bar/upload.php");
xhr.send(formdata);

FormData 和 <form> 元素

Firefox 对 HTML 表单元素进行了一些扩展，添加了一个 getFormData() 方法，该方法允许您将表单数据作为 FormData 对象获取。这还没有成为 HTML 标准的一部分，但预计会在将来的某个时间点添加到规范中（尽管名称可能有所不同）。

var formElement = document.getElementById("myFormElement");
var xhr = new XMLHttpRequest();
xhr.open("POST", "submitform.php");
xhr.send(formElement.getFormData());

您也可以在从表单中检索 FormData 对象并发送它之间向该对象添加数据，如下所示

var formElement = document.getElementById("myFormElement");
formData = formElement.getFormData();
formData.append("serialnumber", serialNumber++);
xhr.send(formData);

这允许您在发送表单数据之前对其进行扩展，以包括表单上不可编辑的其他信息。

资源

• MDN：XMLHttpRequest FormData
• MDN：使用 FormData
• W3C FormData 接口
• W3C multipart/form-data 内容类型
• Bug 546528 - 实现 FormData