FormData基本语法

FormData基本语法

原文链接https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

FormData 接口提供了一种表示表单数据的键值对的构造方式，经过它的数据可以使用 XMLHttpRequest.send() 方法送出，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。

你也可以将它直接传递给构造器 URLSearchParams， if you want to generate query parameters in the way a `` would do if it were using simple GET submission.

实现了 FormData 接口的对象可以直接在for...of结构中使用，而不需要调用entries(): for (var p of myFormData) 的作用和 for (var p of myFormData.entries()) 是相同的。

**FormData()**构造函数用于创建一个新的FormData对象。

语法

var formData = new FormData(form)

• form可选

  一个HTML 上的表单元素——当指定了，这种方式创建的FormData对象会自动将form中的表单值也包含进去，包括文件内容也会被编码之后包含进去。

例子

下面的代码将创建一个空的FormData对象:

var formData = new FormData(); // 当前为空

你可以使用FormData.append来添加键/值对到表单里面；

formData.append('username', 'Chris');

或者你可以使用可选的*form参数来创建一个带预置数据的FormData对象*:

<form id="myForm" name="myForm">
  <div>
    <label for="username">Enter name:</label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="useracc">Enter account number:</label>
    <input type="text" id="useracc" name="useracc">
  </div>
  <div>
    <label for="userfile">Upload file:</label>
    <input type="file" id="userfile" name="userfile">
  </div>
<input type="submit" value="Submit!">
</form>

注意: 所有的输入元素都需要有name属性，否则无法访问到值。

var myForm = document.getElementById('myForm');
formData = new FormData(myForm);

FormData的方法

（1）FormData.append()

​ 添加一个新值到 FormData 对象内的一个已存在的键中，如果键不存在则会添加该键。

​ 如果指定的键已经存在,append() 会把新值添加到已有值集合的后面。

formData.append(name, value, filename);

参数
name ：value中包含的数据对应的表单名称。
value ：表单的值。`可以是USVString`或 Blob` (包括子类型，如 `File`)。
filename `可选，传给服务器的文件名称, 当一个 `Blob`或`File`被作为第二个参数的时候，`Blob`对象的默认文件名是 "blob"。`File` 对象的默认文件名是该文件的名称。

formData.append('username', 'Chris');
formData.append('userpic', myFileInput.files[0], 'chris.jpg');

跟常规表单数据一样，你可以使用同一个名称添加多个值 。例如 (为了与PHP命名习惯一致在名称中添加了[])：

formData.append('userpic[]', myFileInput1.files[0], 'chris1.jpg');
formData.append('userpic[]', myFileInput2.files[0], 'chris2.jpg');

这项技术使得多文件上传的处理更加简单，因为所得数据结构更有利于循环。

（2）FormData.delete()

从 FormData 对象中删除指定键，即 key，和它对应的值，即 value。

formData.delete(name);

你可以通过 delete() 方法来删除键值对：

formData.delete('username');

（3）FormData.entries()

返回一个 iterator对象 ，此对象可以遍历访问FormData中的键值对。其中键值对的key是一个 USVString 对象；value是一个 USVString , 或者 Blob对象。
formData.entries(); //返回一个iterator对象

示例

// Create a test FormData object
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// Display the key/value pairs
for(var pair of formData.entries()) {
   console.log(pair[0]+ ', '+ pair[1]); 
}

执行结果为:

key1, value1
key2, value2

（4）FormData.get() && FormData.getAll()

用于返回FormData对象中和指定的键关联的第一个值，如果你想要返回和指定键关联的全部值，那么可以使用getAll()方法。

formData.get(name);

例子

下面的代码创建一个FormData对象:

var formData = new FormData();

使用FormData.append方法添加两个数据:

formData.append('username', 'Chris');
formData.append('username', 'Bob');

接下来使用get()来回去第一个和"username"关联的值:

formData.get('username'); // Returns "Chris"

下列 getAll() 方法会返回一个数组，包含了所有 username 的值：

formData.getAll('username'); // Returns ["Chris", "Bob"]

（5）FormData.has()

返回一个布尔值，表示该FormData对象是否含有某个key 。

formData.has(name);

示例

下列代码会先创建一个空的 formData 对象：

var formData = new FormData();

下列代码用来检测 FormData对象是否存在``username这个key。默认检测一次，使用FormData.append 插入username之后再检测一次：

formData.has('username'); // Returns false
formData.append('username', 'Chris');
formData.has('username'); // Returns true

（6）FormData.keys()

返回一个迭代器（iterator），遍历了该 formData 包含的所有key ，这些 key 是 USVString 对象。

formData.keys();

示例

// 先创建一个 FormData 对象
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// 输出所有的 key
for (var key of formData.keys()) {
   console.log(key); 
}

结果如下：

key1
key2

（7）FormData.set()

会对 FormData 对象里的某个 key 设置一个新的值，如果该 key 不存在，则添加。

set() 和 FormData.append 不同之处在于：如果某个 key 已经存在，set() 会直接覆盖所有该 key 对应的值，而 FormData.append 则是在该 key 的最后位置再追加一个值。

formData.set(name, value, filename);

参数
name ：value中包含的数据对应的表单名称。
value ：表单的值。可以是USVString或 Blob(包括子类型，如File)。 filename可选，传给服务器的文件名称, 当一个 Blob或File被作为第二个参数的时候，Blob对象的默认文件名是 “blob”。File 对象的默认文件名是该文件的名称。

示例

使用 FormData.set 设置键/值 ：

formData.set('username', 'Chris');
formData.set('userpic', myFileInput.files[0], 'chris.jpg');

（8）FormData.values()

回一个允许遍历该对象中所有值的 迭代器 。这些值是 USVString 或是Blob 对象。

formData.values();

示例

//创建一个FormData测试对象
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

//显示值
for (var value of formData.values()) {
   console.log(value); 
}

结果为：

value1
value2