js中的FormData对象

zitup
3,873 阅读3分钟

前段时间做上传文件的功能，用到了FormData对象，借此机会来详细了解一下它的用法。

本文会先简单介绍一下FormData的定义和实例方法，然后再根据例子来看看实际的用法。

目录

1. FormData对象

2. 实际使用

3. 结语

1. FormData对象

1.1 简单介绍

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

1.2 实例方法

  • FormData.append(key, value, ?filename)：向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值。

  • FormData.delete(key)：删除一个健值对。

  • FormData.entries()：返回一个包含所有键值对的iterator对象。

  • FormData.get(key)：返回与给定键关联的第一个值。

  • FormData.getAll(key)：返回与给定键关联的所有值的数组

  • FormData.has(key)：返回布尔值，表示是否包含某个健

  • FormData.keys()：返回一个包含所有键的iterator对象。

  • FormData.values()：返回一个包含所有值的iterator对象。

  • FormData.set(key, value, ?filename)：给 FormData 设置属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值。

2. 实际使用

FormData对象的使用有两种方式，一种是表单的形式，另一种是通过构造函数。

2.1 Form表单

<form id="form" action="http://localhost:4444/login" method="post" enctype="multipart/form-data">
  <input type="text" id="username" name="username" />
  <input type="password" id="pwd" name="pwd" />
  <input type="file" id="file" name="file" />
  <input type="submit" id="submit" value="提交" />
</form>

NOTE

上面是一个简单的form，要想使用FormData有几个问题需要注意：

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

  2. 上传文件要使用POST方法，GET方法会把input的健值以查询字符串的形式拼接到URL上

  3. enctype属性需要为multipart/form-data，或是在input 和button元素中设置 formenctype 属性，来看MDN的解释：

    application/x-www-form-urlencoded: 数据被编码成以 & 分隔的键-值对, 同时以 '=' 分隔键和值. 非字母或数字的字符会被 percent-encoding: 这也就是为什么这种类型不支持二进制数据(应使用 multipart/form-data 代替).

上面的简单例子提交之后，后端就可以获取到数据。

2.2 FormData接口

上面的例子除了点击提交按钮之外，也可以将form传入FormData构造函数，这样构造的对象可以通过ajax发送到后端，和直接使用form提交按钮一样的效果：

const form = document.getElementById('form');
const fd = new FormData(form);
const xhr = new XMLHttpRequest();
xhr.open("post", "http://localhost:4444/login", true);
xhr.send(fd);

我们也可以创建一个空的FormData对象，通过实例方法添加键值对到表单里面：

const fd = new FormData();
fd.append('username', 'admin');
fd.append('pwd', '123456');

也可以传入File对象的值：

<input type="file" name="file" id="file" />
<script>
	const file = document.getElementById('file').files[0];
  const fd = new FormData();
  fd.append('file', file);
</script>

这样构造的FormData对象也可以直接传给后端使用。

3. 结语

以上就是对FormData的一个简单介绍，如果有任何问题或建议，欢迎随时交流！

avatar
文章
阅读
粉丝