HTML5 Form Data 对象的使用-jQuery

XMLHttpRequest Level 2 添加了一个新的接口——FormData

。

利用 FormData

对象，

我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件，我们还可以使用
XMLHttpRequest 的 send() 方法来异步的提交表单。与普通的 Ajax 相比，使用 FormData的最大优点就是我们可以异步上传二进制文件.

创建一个FormData对象

　　你可以先创建一个空的

FormData

对象,然后使用

append()

方法向该对象里添加字段，如下：

　　注：字段 "userfile" 和 "webmasterfile" 的值都包含了一个文件。通过

FormData.append()

方法赋给字段
"accountnum" 的数字被自动转换为字符（字段的值可以是一个

Blob

对象，

File

对象或者字符串，剩下其他类型的值都会被自动转换成字符串）。

　　在该例子中，我们创建了一个名为 oMyForm 的 FormData对象，该对象中包含了名为"username"，"accountnum"，"userfile" 以及 "webmasterfile" 的字段名，然后使用

XMLHttpRequest

的

send()

方法把这些数据发送了出去。"webmasterfile"
字段的值不是一个字符串,还是一个

Blob

对象。

使用HTML表单来初始化一个FormData对象

　　可以用一个已有的 form元素来初始化

FormData对象，

只需要把这个

form

元素作为参数传入

FormData

构造函数即可：

　　例如：

　　你还可以在已有表单数据的基础上，继续添加新的键值对，如下：

　　你可以通过这种方式添加一些不想让用户编辑的固定字段,然后再发送.

使用FormData对象发送文件

　　你还可以使用

FormData

来发送二进制文件.首先在 HTML 中要有一个包含了文件输入框的 form元素：

　　然后你就可以使用下面的代码来异步的上传用户所选择的文件：

　　你还可以不借助 HTML 表单，直接向

FormData

对象中添加一个

File

对象或者一个

Blob

对象：

　　如果 FormData对象中的某个字段值是一个

Blob

对象，则在发送
HTTP 请求时，代表该

Blob

对象所包含文件的文件名的 "Content-Disposition" 请求头的值在不同的浏览器下有所不同，Firefox使用了固定的字符串"blob"，而 Chrome 使用了一个随机字符串。

　　你还可以使用 jQuery 来发送

FormData，但必须要正确的设置相关选项：

浏览器兼容性

　　桌面端：

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	7+	4.0 (2.0)	10+	12+	5+
支持 filename 参数	(Yes)	22.0 (22.0)	?	?	?

　　移动端：

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	3.0	?	4.0 (2.0)	?	12+	?
支持 filename 参数	?	?	22.0 (22.0)	?	?	?

参考文献：

MDN：使用 XMLHttpRequest
MDN：XMLHttpRequest FormData
XMLHttpRequest 2 新技巧
MDN：使用
FormData对象
W3C：XMLHttpRequest Level 2