• JavaScript系列之 FormData 的简单使用



    一、构造函数

    1、FormData()

    1.1、概述

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

    1.2、语法

    var formData = new FormData(form);
    
    • 1

    1.3、参数

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

    1.4、示例

    ①、准备 HTML 表单

    <form id="form">
    	<input type="text" name="username" />
    	<input type="password" name="password" />
    	<input type="button" />
    form>
    
    • 1
    • 2
    • 3
    • 4
    • 5

    ②、将 HTML 表单转化为 FormData 对象

    var form = document.getElementById("form");
    var formData = new FormData(form);
    
    • 1
    • 2

    转化成的表单数据为

    {"username":"zhangsan","password":"123456"}
    
    • 1

    二、实例方法

    1、append()

    1.1、概述

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

    1.2、语法

    这个方法有两个版本:一个有两个参数的版本和一个有三个参数的版本。

    formData.append(name, value);
    formData.append(name, value, filename);
    
    • 1
    • 2

    1.3、参数

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

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

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

    1.4、返回值

    2、delete()

    2.1、概述

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

    2.2、语法

    formData.delete(name);
    
    • 1

    2.3、参数

    • name
      要删除的键(Key)的名字。

    2.4、返回值

    3、entries()

    3.1、概述

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

    3.2、语法

    formData.entries();
    
    • 1

    3.3、返回值

    返回 iterator。

    4、get()

    4.1、概述

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

    4.2、语法

    formData.get(name);
    
    • 1

    4.3、参数

    • name
      将要获取值的键名。

    4.4、返回值

    String,或者 Blob对象

    5、getAll()

    5.1、概述

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

    5.2、语法

    formData.getAll(name);
    
    • 1

    5.3、参数

    • name
      将要获取值的键名。

    5.4、返回值

    String数组,或者 Blob对象数组

    6、has()

    6.1、概述

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

    6.2、语法

    formData.has(name);
    
    • 1

    6.3、参数

    • name
      将要查询值的键名。

    6.4、返回值

    true或者false boolean值

    7、keys()

    7.1、概述

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

    7.2、语法

    formData.keys();
    
    • 1

    7.3、返回值

    返回一个迭代器( iterator)。

    8、set()

    8.1、概述

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

    8.2、语法

    该方法有两种使用方式,一个是传入两个参数,一个是传入三个参数。

    formData.set(name, value);
    formData.set(name, value, filename);
    
    • 1
    • 2

    8.3、参数

    • name
      字段名称。

    • value
      字段的值,该值可以是一个 String 或 Blob(包括其子类,例如 File),如果不是这两个指定的类型,其将被转成一个字符串。

    • filename 【可选】
      当第二个参数传递的是一个 blob 对象(Blob)或者 file 对象(File),filename 参数就代表传给服务端的文件名(一个 String)。 Blob 对象的默认文件名是 “blob”,File 对象的默认文件名则为其“name”属性

    9、values()

    9.1、概述

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

    9.2、语法

    formData.values();
    
    • 1

    9.3、返回值

    返回一个迭代器。

    三、set和append的区别

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

    写在最后

    如果你感觉文章不咋地//(ㄒoㄒ)//,就在评论处留言,作者继续改进;o_O???
    如果你觉得该文章有一点点用处,可以给作者点个赞;\\*^o^*//
    如果你想要和作者一起进步,可以微信扫描二维码,关注前端老L~~~///(^v^)\\\~~~
    谢谢各位读者们啦(^_^)∠※!!!

  • 相关阅读:
    [b01lers2020]Welcome to Earth-1
    【UT】如何进行单元测试
    转置矩阵的性质
    访问控制列表ACL讲解——想偷偷访问数据,我ACL可不同意
    计算机与操作系统
    过一遍Python的Numpy库(最后因为各种原因只过到一半)
    【企业安全】企业安全系列第 1 部分 — 数据治理
    基于Springboot实现社区维修平台管理系统演示【项目源码+论文说明】
    Python数据结构(队列)
    kubernetes集群如何更改所有节点IP
  • 原文地址:https://blog.csdn.net/weixin_62277266/article/details/127719654