JS对象文档 - FormData

发布时间 2023-11-06 15:49:10作者: 水车

前言

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

正文

构造函数

const formData = new FormData(form)

参数

form 可选

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

实例方法

FormData.append()

FormData 接口的 append() 方法会添加一个新值到 FormData 对象内的一个已存在的键中,如果键不存在则会添加该键。

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

formData.append(name, value);
formData.append(name, value, filename);
参数

name
value 中包含的数据对应的表单名称。

value
表单的值。可以是 String 或 Blob (包括子类型,如 File)。

filename 可选
传给服务器的文件名称 (一个 String), 当一个 Blob 或 File 被作为第二个参数的时候, Blob 对象的默认文件名是 "blob"。 File 对象的默认文件名是该文件的名称。

返回值

FormData.delete()

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

FormData.entries()

该方法返回一个 iterator对象,此对象可以遍历访问 FormData 中的键值对。其中键值对的 key 是一个 String 对象;value 是一个 String , 或者 Blob对象。

FormData.get()

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

FormData.getAll()

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

FormData.has()

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

FormData.keys()

该方法返回一个迭代器(iterator),遍历了该 formData 包含的所有 key,这些 key 是 String 对象。

FormData.set()

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

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

FormData.values()

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