前端 | FormData 用法详解

前端 | FormData 用法详解

介绍

​FormData 是 Ajax2.0 对象用以将数据编译成键值对，以便于 XMLHttpRequest 来发送数据。XMLHttpRequest Level 2 提供的一个接口对象，可以使用该对象来模拟和处理表单并方便的进行文件上传操作
​
如果表单属性设为 multipart/form-data，则会使用表单的 submit() 方法来发送数据，从而发送数据具有同样形式。

FormData 的主要用途有两个：

1. 将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。
2. 异步上传二进制文件

使用方法

• 创建一个空的对象

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

// 通过 append 方法添加数据
formData.append("username", "username");
1
2
3
4
5

• 创建一个带预置数据的对象

<form id="myForm" action="" name="myForm">
  <div>
    <label for="username">用户名:label>
    <input type="text" id="username" name="username">
  div>
  <div>
    <label for="password">密码:label>
    <input type="password" id="password" name="password">
  div>
  <div>
    <input type="submit" value="提交">
  div>
form>
1
2
3
4
5
6
7
8
9
10
11
12
13

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

// 获取页面已有的一个form表单
var form = document.getElementById("myForm");

// 用表单来初始化
var formData = new FormData(form);

// 根据 name 属性来访问对象中的字段
var username = formData.get("username");

// 在此基础上添加其它数据
formData.append("token","abcdefghijklmnopqrstuvwxyz");
1
2
3
4
5
6
7
8
9
10
11

实际应用

DOM 文档部分

<form action="">
	<label for="">
		姓名: <input type="text" name="name">
	label>
	<label for="">
		文件：<input id="file" type="file" name="file">
 	label>
 	<label for="">
		<input type="button" value="保存">
	label>
form>
1
2
3
4
5
6
7
8
9
10
11
12

原生 js 上传文件

// 获取按钮
var btn = document.querySelector('[type=button]');
//绑定事件
btn.onclick = function () {
     // 文件元素
    var file = document.querySelector('[type=file]');
    // 通过FormData将文件转成二进制数据
    var formData = new FormData();
    // 将文件转二进制
    formData.append('upload', file.files[0]);
	//创建XMLHttpRequest，用这个来发送数据
    var xhr = new XMLHttpRequest;
    /*初始化HTTP请求参数(请求方式,url,是否同步)*/
    xhr.open('post', 'file.php');
	
	/*
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	设置请求头的contentType
	*/
	
    // 监听上传进度
    xhr.upload.onprogress = function (ev) {
    // 事件对象
    // console.log(ev);
 
        var percent = (ev.loaded / ev.total) * 100 + '%';
 
        console.log(percent);
 
        progress.style.width = percent;
    }
 
    xhr.send(formData);
 
    xhr.onreadystatechange = function () {
    //status状态为200 表示请求成功，readystate为4表示对象传递完毕或者准备就绪 
            if(xhr.readyState == 4 && xhr.status == 200) {
            }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

API

• FormData.append()

通过 append(key,value) 来添加数据，如果指定的 key 不存在则会新增一条数据，如果key存在，则追加到数据末尾。

FormData.set 和 append() 的区别在于，如果指定的键已经存在， FormData.set 会使用新值覆盖已有的值，而 append() 会把新值添加到已有值集合的后面。

语法

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

示例

// 创建空对象
var formData = new FormData();
 
// 通过 FormData.append 往对象里加入键值对：
formData.append('name', 'name1');
formData.append('file', myFileInput.files[0], 'file1.jpg');
 
// 跟常规表单数据一样，你可以使用同一个名称添加多个值 
formData.append('file', myFileInput1.files[0], 'file1.jpg');
formData.append('file', myFileInput2.files[0], 'file2.jpg');
 
// 获取同一键名的所有值， 如：[myFileInput1.files[0], myFileInput2.files[0]]
formData.getAll("file"); 
1
2
3
4
5
6
7
8
9
10
11
12
13

• FormData.get/getAll()

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

getAll() 方法会返回该 FormData 对象指定 key 的所有值。

语法

// name: 将要获取值的键名
// 返回值： 包含值的FormDataEntryValue (en-US)。
formData.get(name);
1
2
3

示例

// 创建一个空对象
var formData = new FormData();
 
// 使用 FormData.append 方法添加数据
formData.append('username', 'name1');
 
// 获取 key 为name的第一个值
formData.get('username'); // "name1"
 
// 返回一个数组，获取 key 为 name 的所有值
formData.getAll("username"); // ["name1"]
1
2
3
4
5
6
7
8
9
10
11

• FormData.delete()

delete() 方法会从 FormData 对象中删除指定键，即 key，和它对应的值，即 value

语法

// name: 要删除的键（Key）的名字
formData.delete(name);
1
2

示例

// 创建一个带有预设值的对象
var formData = new FormData(myForm);

// 从 formData 对象中移除键名为 username 的数据
formData.delete('username');
1
2
3
4
5

• FormData.set()

给 FormData 设置属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值。

语法

// name: 字段名称
// value：字段的值，如果是传入两个参数的方式，那么该值是一个 USVString，如果不是，将被转成一个字符串。如果是传入三个参数的方式，那么该值将是一个布尔值（Blob），文件（File），或者一个 USVString，如果不是，将被转成一个字符串。
// filename(可选): 当第二个参数传递的是一个blob对象（Blob）或者file对象（File），filename参数就代表传给服务端的文件名（一个USVString）。Blob 对象的默认文件名是 "blob"。
 
// 该方法有两种使用方式，一个是传入两个参数，一个是传入三个参数。
formData.set(name, value);
formData.set(name, value, filename);
1
2
3
4
5
6
7

示例

// 创建一个空对象
var formData = new FormData();

formData.set('username', 'linzy');
formData.set('pic', myFileInput.files[0], 'pic.jpg');
1
2
3
4
5

• FormData.has()

has() 方法会返回一个布尔值，表示该 FormData 对象是否含有某个 key

语法

formData.has(name);
1

示例

// 创建一个空对象
var formData = new FormData();

formData.has('username'); // false

formData.append('username', 'linzy');
formData.has('username'); // true
1
2
3
4
5
6
7

• FormData.entries()

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

语法

formData.entries();
1

示例

var formData = new FormData();

formData.append('key1', 'value1');
formData.append('key2', 'value2');

// 每调用一次 next()返回一条数据，数据的顺序由添加的顺序决定
// 返回的是一个对象，当其 done 属性为 true 时，说明已经遍历完所有的数据，这个也可以作为判断的依据
// 返回的对象的 value 属性以数组形式存储了一对key/value，数组下标0为key，下标1为value，如果一个key值对应多个value，会变成多对key/value返回
var i = formData.entries();
i.next(); // {done:false, value:["key1", "value1"]}
i.next(); // {done:fase, value:["key2", "value2"]}
i.next(); // {done:true, value:undefined}
 
// 方式二
for(var pair of formData.entries()) {
   console.log(pair[0]+ ', '+ pair[1]);
}
// key1, value1
// key2, value2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

• FormData.keys()

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

语法

// 返回值：返回一个迭代器（ iterator）
formData.keys();
1
2

示例

// 先创建一个 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
1
2
3
4
5
6
7
8
9
10
11
12
13

• FormData.values()

FormData.values() 方法返回一个允许遍历该对象中所有值的 迭代器 。这些值是 USVString 或是 Blob 对象。

语法

// 返回值：返回一个迭代器
formData.values();
1
2

示例

// 创建一个对象
var formData = new FormData();

formData.append('key1', 'value1');
formData.append('key2', 'value2');
 
// 显示值
for (var value of formData.values()) {
   console.log(value);
}

// value1
1
2
3
4
5
6
7
8
9
10
11
12

总结

本章节主要是对 FormData 用法进行简单的整理和收录，如若有问题，请及时反馈。