XMLHttpRequest FormData

What is FormData

XMLHttpRequest Level 2 adds support for the new FormData interface. FormData objects provide a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest send() method.

XMLHttpRequest 第二版添加了对新接口 FormData 的支持。FormData 可以很方便地将表单字段和它们的值建立成键和值对应的成对形式，然后通过 XMLHttpRequest 的 sent() 方法发送表格数据。

Constructor

FormData()

用于新建一个 FormData 对象：

1	var formData = new FormData(form);

也可以先创建一个空 FormData 对象，之后再添加对应的键和值，append() 方法请看下面。

1 2	var formData = new FormData(); formData.append('username', 'Justin');

Method

FormData.append

本方法用于向已存在的键添加新的值，如该键不存在，新建之。

语法

1 2	formData.append(name, value); formData.append(name, value, filename);

参数解释

name 键 (key)，对应表单域
value 表单域的值
filename (optional) The filename reported to the server (a USVString), when a Blob or File is passed as the second parameter. The default filename for Blob objects is “blob”.

FormData.delete

将一对键和值从 FormData 对象中删除。

1	formData.delete(username);

FormData.get

返回给定键的第一个值

1
2
3

formData.append('username', 'Justin');
formData.append('username', 'Chris');
formData.get(username);    // "Justin"

FormData.getAll

返回给定键的所有值

1
2
3

formData.append('username', 'Justin');
formData.append('username', 'Chris');
formData.get(username);    // ["Justin", "Chris"]

FormData.has

检查是否包含给定键，返回 true 或 false

1	formData.has(username);

FormData.set

设置给定键的值

1 2	formData.set(name, value); formData.set(name, value, filename);

浏览器兼容情况

来自 MDN：

Desktop

Feature	Chrome	Firfox(Gecko)	Intenet Explorer	Opera	Safari
Basic support	7+	4.0(2.0)	10+	12+	5+
append with filename	(Yes)	22.0(22.0)	?	?	?
delete, get, getAll, has, set	Behind Flag	Not supported	Not supported	(Yes)	Not supported

Mobile

Feature	Android	Chrome Android	Firfox Mobile (Gecko)	Firfox OS (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	3.0	?	4.0(2.0)	1.0.1	?	12+	?
append with filename	?	?	22.0(22.0)	1.2	?	?	?
delete, get, getAll, has, set	(Yes)	(Yes)	Not supported	Not supported	Not supported	(Yes)	Not supported