FormData对象

通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。
它可以更灵活方便的发送表单数据，因为可以独立于表单使用。
如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同。

一、创建一个空对象实例

你可以自己创建一个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);

注意：FormData 对象的字段类型可以是 Blob, File, 或者 string:如果它的字段类型不是Blob也不是File，则会被转换成字符串类型。所以字段 "accountnum" 是数字类型，它将被FormData.append()方法转换成字符串类型 。

 

上面的示例创建了一个FormData实例，包含"username", "accountnum", "userfile" 和 "webmasterfile"四个字段，然后使用XMLHttpRequest的send()方法发送表单数据。

字段 "webmasterfile" 是 Blob类型。一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 File 接口基于Blob，继承 blob功能并将其扩展为支持用户系统上的文件。你可以通过 Blob() 构造函数创建一个Blob对象。

 

二、通过HTML表单创建FormData对象

想要构造一个包含Form表单数据的FormData对象，需要在创建FormData对象时指定表单的元素。

你还可以在创建一个包含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 对象，可以把form中所有表单元素的name与value组成一个queryString，提交到后台。在使用Ajax提交时，使用FormData对象可以减少拼接queryString的工作量。

 

三、关于formData.append()方法

你还可以直接向FormData对象附加File或Blob类型的文件，如下所示：

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

使用append()方法时，可以通过第三个可选参数设置发送请求的头 Content-Disposition 指定文件名。如果不指定文件名（或者不支持该参数时），将使用名字“blob”。

 

 

MDN参考：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

MDN资料：FormData() https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/FormData

segmentfault参考：https://segmentfault.com/a/1190000006716454