XMLHttpRequest FormData

What is FormData

MDN

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 對象：

javascriptvar formData = new FormData(form);

也能夠先建立一個空 FormData 對象，以後再添加對應的鍵和值，append() 方法請看下面。

javascriptvar formData = new FormData();
formData.append('username', 'Justin');

Method

FormData.append

本方法用於向已存在的鍵添加新的值，如該鍵不存在，新建之。

語法

javascriptformData.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 對象中刪除。

javascriptformData.delete(username);

FormData.get

返回給定鍵的第一個值

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

FormData.getAll

返回給定鍵的全部值

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

FormData.has

檢查是否包含給定鍵，返回 true 或 false

javascriptformData.has(username);

FormData.set

設置給定鍵的值

javascriptformData.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