最近在项目的开发过程中遇到了一个需求:前端向后端用POST
方法发送数据的时候,需要用到FormData
,因为在以往的项目中没有遇到过使用FormData
传递数据的情况,因此特意补了一下这方面的知识,码起来备忘。
文章参考自:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
FormData 接口提供了一种表示表单数据的键值对的构造方式,经过它的数据可以使用 XMLHttpRequest.send() 方法送出,本接口和此方法都相当简单直接。如果送出时的编码类型被设为 “multipart/form-data”,它会使用和表单一样的格式。
如果你想构建一个简单的GET请求,并且通过的形式带有查询参数,可以将它直接传递给URLSearchParams。
实现了 FormData 接口的对象可以直接在for…of结构中使用,而不需要调用entries() : for (var p of myFormData) 的作用和 for (var p of myFormData.entries()) 是相同的。
以上都是大家不爱看的废话,下面我们来讲点实用的:
FormData
为我们提供了9个实用的API
:
FormData.append()
- 向
FormData
中添加新的属性值,FormData
对应的属性值存在也不会覆盖原值,而是新增一个值,如果属性不存在则新增一项属性值。
- 向
FormData.delete()
- 从
FormData
对象里面删除一个键值对。
- 从
FormData.entries()
- 返回一个包含所有键值对的
iterator
对象。
- 返回一个包含所有键值对的
FormData.get()
- 返回在
FormData
对象中与给定键关联的第一个值。
- 返回在
FormData.getAll()
- 返回一个包含
FormData
对象中与给定键关联的所有值的数组。
- 返回一个包含
FormData.has()
- 返回一个布尔值表明
FormData
对象是否包含某些键。
- 返回一个布尔值表明
FormData.keys()
- 返回一个包含所有键的
iterator
对象。
- 返回一个包含所有键的
FormData.set()
- 给
FormData
设置属性值,如果FormData
对应的属性值存在则覆盖原值,否则新增一项属性值。
- 给
FormData.values()
- 返回一个包含所有值的
iterator
对象。
- 返回一个包含所有值的
好了,FormData
对象提供的几个实用的API
已经初步介绍完了,至于介绍中的iterator
对象,不清楚的小伙伴可以转战这里:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols
接下来到了每个API
单独讲解如何使用的时候了:
构造函数FormData()
:
// 用法1 创建一个空的FormData对象
var formData = new FormData();
// 用法2
// 此处的form指的是html中的form表单元素
// 这种方式创建的FormData对象会自动将form中的表单值也包含进去
// 包括文件内容也会被编码之后包含进去
var formData = new FormData(form);
formData.append()
:
// 参数name是指value中包含的数据对应的表单名称
// 参数value是指表单的值 可以是USVString或Blob(包括子类型,如 File)
// 参数filename(可选)是指传给服务器的文件名称(一个 USVString)
// 当一个Blob或File被作为第二个参数的时候
// Blob对象的默认文件名是"blob" File对象的默认文件名是该文件的名称
formData.append(name, value, filename);
formData.delete()
:
// 参数name是指需要删除的键(key)的名字
formData.delete(name);
formData.entries()
:
(留坑待填)