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

Mobile