前端 之 FormData对象浅谈

news2024/11/26 16:53:20

一、简介

​ 通常情况下，前端在使用post请求提交数据的时候，请求都是采用application/json 或 application/x-www-form-urlencoded编码类型，分别是借助JSON字符串来传递参数或者key=value格式字符串（多参数通过&进行连接）来传递参数，确实足以覆盖大多数业务场景。但是在文件上传等特殊业务场景下，这两种编码类型就有些捉襟见肘了，例如选择JSON字符串传递参数，在使用JSON.stringify()格式化参数数据时，会将File和Blob对象转化成{}，文件数据会丢失。所以此时我们就需要使用第三种编码类型multipart/form-data，使用FormData对象来传递参数。

​ FormData 提供了一种以 key/value键值对集合表示表单数据的数据构造方式，通过该方式我们可以将file、blob等不易传输的数据通过 ajax 请求轻松的发送到服务器端。

​ 当使用FormData 对象作为参数时，无需手动设置请求的编码类型，浏览器会自动将请求的编码类型Content-type设置为multipart/form-data。

浏览器兼容性：

在这里插入图片描述

二、相关方法

1、FormData()

​ FormData([form]) 方法是FormData 对象的构造函数，用来创建一个新的FormData 对象。

// 创建空的 FormData 对象
const formData = new FormData()

​ 该方法拥有一个可选参数form，值为页面HTML中的一个<form>表单元素，当设置该参数时，创建的FormData对象将自动的将form表单中的值包含进去，包括file文件内容也会被编码之后包含进去。但是要注意给表单中所有的输入元素（<input>、<textarea>）设置name属性，否则无法被FormData对象包含，输入元素的name属性将会成为FormData对象中数据键值对的key，输入元素的值将会成为对应的value。

<!-- form表单元素 -->	
<form action="#" id="form1">
    <div>
      <label for="name">姓名：</label>
      <input type="text" id="name" name="name">
    </div>
    <div>
      <label for="age">年龄：</label>
      <input type="text" id="age" name="age">
    </div>
    <div>
      <label for="sex">性别：</label>
      <!-- 未设置name属性不会被 formData 包含 -->
      <input type="text" id="sex">
    </div>
  </form>
  <br />
  <button onclick="logFormData()">输出formData对象</button>

<script>
// 输出 FormData 对象的数据
function logFormData () {
	// 获取表单元素
	const form = document.getElementById('form1')
	// 创建带有预置数据的 FormData 对象
  const formData = new FormData(form)
  // 输出formData对象中的所有键值对
  for (var pair of formData.entries()) {
    console.log(pair[0] + '----' + pair[1]);
  }
}
</script>
执行结果：

在这里插入图片描述

2、FormData.append()

​ FormData.append(name,value,[filename]) 方法用于向FormData 对象中添加一个新的值，该方法拥有两个必选参数name和value，以及一个可选参数filename。name对应FormData 对象中键值对数据的key，value对应键值对数据的值。如果name这个key在FormData中已经存在，则会将新值value添加到原有值集合的后面，先添加的值在前面，后添加的值在后面，多个值同时以集合的形式存在；如果name这个key在FormData中不存在，则会新增这个key，并赋予对应的值value。

// 创建空的 FormData 对象
const formData = new FormData()
// 添加一个键值对 此时并不存在对应的key 会新增这个key
formData.append('name', '张三')
// 给同一个key 再次添加值
formData.append('name', '李四')
// 输出这个key对应的所有value值
console.log("formData.getAll('name')----", formData.getAll('name'));
执行结果：

在这里插入图片描述

​ 可选参数filename是当第二个参数value为Blob或file文件数据时，设置传给服务器端的文件名称。如果不设置该参数，则Blob类型默认文件名为blob，file类型的默认文件名为文件本身的名称。

// 创建空的 FormData 对象
const formData = new FormData()
// 添加一个file键值对数据 取默认文件名称
formData.append('file', file)
// 添加一个file键值对数据 并设置文件名称
formData.append('file', file, 'test.png')
// 输出这个key对应的所有value值
console.log("formData.getAll('file')----", formData.getAll('file'));
执行结果2：

在这里插入图片描述

3、FormData.set()

​ FormData.set(name,value,[filename]) 方法与FormData.append()方法类似，都是用于向FormData 对象中添加一个新的值，如果name这个key在FormData中不存在，则会新增这个key，并赋予对应的值value；但是如果name这个key在FormData中已经存在，那么该方法会直接覆盖掉原来的value，无论原有值集合有几个数据，全都被覆盖。

​ 其余用法与FormData.append()方法相同。

// 创建空的 FormData 对象
const formData = new FormData()
// 使用append()添加一个键值对 此时并不存在对应的key 会新增这个key
formData.append('name', '张三')
// 使用append()给同一个key 再次添加值
formData.append('name', '李四')
// 输出这个key对应的所有value值
console.log("append()两次数据后----", formData.getAll('name'));
// 使用set()给同一个key 设置值 会覆盖之前的值
formData.set('name', '王五')
// 输出这个key对应的所有value值
console.log("set()一次数据后----", formData.getAll('name'));
执行结果：

在这里插入图片描述

4、FormData.delete()

​ FormData.delete(name) 方法用于从FormData对象中删除name这个key及其对应的所有value。

// 创建空的 FormData 对象
const formData = new FormData()
// 使用append()添加一个键值对 此时并不存在对应的key 会新增这个key
formData.append('name', '张三')
// 使用append()给同一个key 再次添加值
formData.append('name', '李四')
// 输出这个key对应的所有value值
console.log("append()两次数据后----", formData.getAll('name'));
// 使用delete()删除一个key及其所有的value
formData.delete('name')
// 再次输出这个key
console.log("delete()删除一次后----", formData.getAll('name'));
执行结果：

在这里插入图片描述

5、FormData.entries()

​ FormData.entries() 方法用于获取一个由FormData对象中所有键值对组成的iterator（迭代器）对象，然后通过该对象可以遍历访问所有的键值对数据。

​ 该方法获取的iterator（迭代器）对象，需要通过for...of..的形式来进行遍历，每个遍历元素都是数组类型，数组中有两个元素，第一个为key，另一个为value。如果FormData对象中的某个key有多个value，则该key会被遍历多次，每次只对应一个value。

// 创建空的 FormData 对象
const formData = new FormData()
// 使用append()添加一个键值对
formData.append('name', '张三')
// 使用append()给同一个key 再次添加值
formData.append('name', '李四')
// 使用append()添加另外一个键值对
formData.append('sex', '男')
// 获取迭代器对象
const entries = formData.entries()
// 输出迭代器对象
console.log('entries-----', entries);
// 遍历迭代器对象
for (var pair of entries) {
  // 输出遍历元素
	console.log('pair---', pair);
  // 输出元素的key和value
	console.log(pair[0] + '----' + pair[1]);
}
执行结果：

在这里插入图片描述

​ 除了该方法外，我们还可以通过for...of..形式直接遍历FormData对象，其作用与结果与该方法完全相同：

// 创建空的 FormData 对象
const formData = new FormData()
// 使用append()添加一个键值对
formData.append('name', '张三')
// 使用append()给同一个key 再次添加值
formData.append('name', '李四')
// 使用append()添加另外一个键值对
formData.append('sex', '男')
// 遍历formData对象
for (var pair of formData) {
	console.log('当前遍历元素---', pair);
	console.log(pair[0] + '----' + pair[1]);
}
执行结果2：

在这里插入图片描述

6、FormData.keys()

​ FormData.keys() 方法用于获取一个由FormData对象中所有键值对中的key组成的iterator（迭代器）对象，然后通过该对象可以遍历访问所有的key，类型为String。与entries()方法相同的是：如果FormData对象中的某个key有多个value，则该key会被遍历多次，每次对应一个value。

// 创建空的 FormData 对象
const formData = new FormData()
// 使用append()添加一个键值对
formData.append('name', '张三')
// 使用append()给同一个key 再次添加值
formData.append('name', '李四')
// 使用append()添加另外一个键值对
formData.append('sex', '男')
// 获取key组成的迭代器对象
const keys = formData.keys()
// 输出迭代器对象
console.log('keys-----', keys);
// 遍历迭代器对象
for (var key of keys) {
	console.log('key---', key);
}
执行结果：

在这里插入图片描述

7、FormData.values()

​ FormData.values() 方法用于获取一个由FormData对象中所有键值对中的value组成的iterator（迭代器）对象，然后通过该对象可以遍历访问所有的value，类型为String、File、Blob。如果FormData对象中的某个key有多个value，则每个value都会遍历一次。

// 创建空的 FormData 对象
const formData = new FormData()
// 使用append()添加一个键值对
formData.append('name', '张三')
// 使用append()给同一个key 再次添加值
formData.append('name', 333444)
// 使用append()添加另外一个键值对
formData.append('sex', '男')
// 获取value组成的迭代器对象
const values = formData.values()
// 输出迭代器对象
console.log('values-----', values);
// 遍历迭代器对象
for (var value of values) {
	console.log('value---', value);
}
执行结果：

在这里插入图片描述

8、FormData.has()

​ FormData.has() 该方法用于判断FormData 对象中是否含有某个key，返回值为一个布尔值。

// 创建空的 FormData 对象
const formData = new FormData()
// 使用append()添加一个键值对
formData.append('name', '张三')
// 使用append()添加另外一个键值对
formData.append('sex', '男')
// 使用has()判断是否存在某个key
console.log('has()判断是否存在name---', formData.has('name'));
// 使用delete()删除一个key及其所有的value
formData.delete('sex')
// 使用has()判断一个已经被删除的key
console.log('has()判断被delete()删除的sex---', formData.has('sex'));
// 使用has()判断一个不存在的key
console.log('has()判断不存在的age---', formData.has('age'));
执行结果：

在这里插入图片描述

9、FormData.get()

​ FormData.get(name) 方法用于获取FormData 对象中name这个key所对应的value集合里的第一个value，value集合中值的顺序，按照添加的顺序进行排序。

// 创建空的 FormData 对象
const formData = new FormData()
// 使用append()添加一个键值对
formData.append('name', '张三')
// 使用append()给同一个key 再次添加值
formData.append('name', 333)
// 使用append()添加另外一个键值对
formData.append('sex', '男')
// 使用get()获取name对应的第一个value
console.log('get()获取name对应的第一个value---', formData.get('name'));
// 使用get()获取sex对应的第一个value
console.log('get()获取sex对应的第一个value---', formData.get('sex'));
执行结果：

在这里插入图片描述

10、FormData.getAll()

​ FormData.getAll() 方法用于获取FormData 对象中name这个key所对应的value集合，value集合中值的顺序，按照添加的顺序进行排序。

// 创建空的 FormData 对象
const formData = new FormData()
// 使用append()添加一个键值对
formData.append('name', '张三')
// 使用append()给同一个key 再次添加值
formData.append('name', 333)
// 使用append()添加另外一个键值对
formData.append('sex', '男')
// 使用getAll()获取name对应的value集合
console.log('getAll()获取name对应的value集合---', formData.getAll('name'));
// 使用getAll()获取sex对应的value集合
console.log('getAll()获取sex对应的value集合---', formData.getAll('sex'));
执行结果：

在这里插入图片描述

三、相关资料

FormData

form

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/525243.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

mediasoup Transport端口策略

mediasoup Transport端口策略

一. 前言 mediasoup 支持多种类型的 Transport&#xff0c;有 WebRtcTransport&#xff0c;PlainTransport 以及 PipeTransport&#xff0c;对于 WebRtcTransport 目前 mediasoup 最新版本已经支持多个 WebRtcTransport 共用单个端口的模式了&#xff0c;而在此之前每个 WebRtc…
阅读更多...
真题详解（补码转换）-软件设计（七十四)

真题详解（补码转换）-软件设计（七十四)

真题详解(索引查询)-软件设计&#xff08;七十三)https://blog.csdn.net/ke1ying/article/details/130659024 Composite模式&#xff1a; 以树形结构来表示”整体-部分”的关系&#xff0c;使得单个和团体的使用都具有一致性。 对一个基本有序的数组进行排序&#xff0c;适合…
阅读更多...
【PCIE体系结构九】物理层的基本逻辑框架

【PCIE体系结构九】物理层的基本逻辑框架

&#x1f449;个人主页&#xff1a;highman110 &#x1f449;作者简介&#xff1a;一名硬件工程师&#xff0c;持续学习&#xff0c;不断记录&#xff0c;保持思考&#xff0c;输出干货内容 参考书籍&#xff1a;《深入浅出SSD&#xff1a;固态存储核心技术、原理与实战》 物…
阅读更多...
可见光遥感图像目标检测（三）文字场景检测之Arbitrary

可见光遥感图像目标检测（三）文字场景检测之Arbitrary

前言 前面介绍了关于可见光遥感图像目标检测任务主要面临的问题&#xff0c;现在对旋转目标的问题进行优化&#xff0c;为了便于大家理解与之前通用目标检测区别&#xff0c;采用Faster-Rcnn网络模型的架构对旋转目标的检测进行改进。 本教程禁止转载。同时&#xff0c;本教程来…
阅读更多...
5G-NR非连续接收DRX参数配置详解

5G-NR非连续接收DRX参数配置详解

5G-NR系统配置中的非连续接收系统 DRX&#xff1a;Discontinuous Reception 5G终端商用在即&#xff0c;根据前期测试及部分5G友好用户反馈&#xff0c;“5G终端功耗大&#xff0c;待机差”问题特别突出。根据5G技术特性&#xff0c;导致5G终端相比4G功耗大很多的原因有如下4…
阅读更多...
干货 | Amos实操教程之中介效应检验

干货 | Amos实操教程之中介效应检验

Hello&#xff0c;大家好&#xff01; 这里是壹脑云科研圈&#xff0c;我是喵君姐姐~ 本次推文&#xff0c;我们就来给大家介绍一种处理结构方程模型软件——Amos 。 01 摘要 Amos是什么&#xff1f; Amos由James L. Arbuckle所发展&#xff0c;全名是Analysis of Moment S…
阅读更多...
泛化深度学习综述

泛化深度学习综述

机器学习系统通常假设训练和测试分布是相同的。为此&#xff0c;一个关键的需求是开发可以推广到unseen分布的模型。领域泛化&#xff08;DG&#xff0c;Domain generalization&#xff09;&#xff0c;即分布外泛化&#xff08;out-of-distribution generalization&#xff09…
阅读更多...
vim强大的快捷键

vim强大的快捷键

文章目录 vim强大的快捷键&#xff08;必须在可视模式下完成&#xff09;光标移动&#xff08;上下左右移动&#xff09;行选中列选中复制粘贴剪切删除取消后悔取消跳到文件的末尾跳转到我呢见的开头保存并且退出vim编辑器自动补全自动格式化回到行首&#xff08;这一行的第一个…
阅读更多...
ESP32设备驱动-MMA8452加速度计驱动

ESP32设备驱动-MMA8452加速度计驱动

MMA8452加速度计驱动 文章目录 MMA8452加速度计驱动2、硬件准备3、软件准备4、驱动实现MMA8452Q 是一款智能、低功耗、三轴、电容式微加工加速度计，具有 12 位分辨率。 该加速度计具有嵌入式功能，具有灵活的用户可编程选项，可配置为两个中断引脚。 嵌入式中断功能可实现整体…
阅读更多...
DJ5-2 差错检测和纠错

DJ5-2 差错检测和纠错

目录 一、差错检测和纠错技术 1、发送节点 2、接收节点 3、说明 二、差错检测技术 1、一比特奇偶校验 2、二维奇偶校验 3、Internet 校验和方法&#xff08;复习&#xff09; 4、循环冗余检测 CRC 5、差错检测方法比较 一、差错检测和纠错技术 链路层提供比特级差错检…
阅读更多...
我为什么要使用vuetify3做为基础组件去开发公司组件库

我为什么要使用vuetify3做为基础组件去开发公司组件库

设计风格 Vuetify是基于Material Design规范&#xff0c;依靠Material Design的设计优势&#xff0c;在无需编写一行css代码就可以得到非常美观的界面功能&#xff0c;同时Vuetify还具备自适应的能力&#xff0c;可以使用一套代码写出同时兼容手机、平板、web的功能&#xff1…
阅读更多...
如何在Simulink中使用可变电阻-可变电容-可变电感

如何在Simulink中使用可变电阻-可变电容-可变电感

1. 原由 前期文章提出了Simulink如何在线修改&#xff08;动态修改&#xff09;模块参数的方法&#xff0c;并提供原创的Dynamic Change Parameter模块&#xff08;简称DCP模块&#xff09;&#xff0c;模块得到了许多朋友的使用。最近收到几位朋友反馈&#xff0c;他们使用DCP…
阅读更多...
VGG网络原理与搭建

VGG网络原理与搭建

VGG网络原理与搭建 VGG在2014年由牛津大学著名研究组VGG&#xff08;Visual Geometry Group&#xff09;提出&#xff0c;斩获该年ImageNet竞赛中Localization Task&#xff08;定位任务&#xff09;第一名和Classification Task&#xff08;分类任务&#xff09;第二名。 论文…
阅读更多...
HTTP第10讲——响应状态码

HTTP第10讲——响应状态码

背景 HTTP 报文里请求行的组成部分&#xff0c;包括请求方法和 URI。有了请求行&#xff0c;加上后面的头字段就形成了请求头&#xff0c;可以通过 TCP/IP 协议发送给服务器。 服务器收到请求报文&#xff0c;解析后需要进行处理&#xff0c;具体的业务逻辑多种多样&#xff0…
阅读更多...
四、c++学习（类的简介）

四、c++学习（类的简介）

上一篇我们做了一个简单的界面优化&#xff0c;并且我们可以选择进入游戏界面&#xff0c;所以这一篇我们来实现贪吃蛇和食物。 C学习&#xff0c;b站直播视频 文章目录 4.0 课程目标4.1 结构体4.1.1 c语言面向对象4.1.2 c的结构体4.1.3 内存对齐 4.2 union4.2.1 union应用&am…
阅读更多...
Chapter8：线性系统的状态空间分析与综合(上)

Chapter8：线性系统的状态空间分析与综合(上)

第八章：线性系统的状态空间分析与综合 Exercise8.1 已知控制系统结构图如下所示： 其中： u u u为输入， y y y
阅读更多...
Gradle版本、Gradle插件版本和AndroidStudio版本之间的对应关系

Gradle版本、Gradle插件版本和AndroidStudio版本之间的对应关系

问题描述 有时候碰到gradle版本死活下载不下来&#xff0c;还会报Gralde Sync Issues,有可能是你的Gradle Wrapper版本和Gradle插件版本、AndroidStudio版本不匹配。 解决方案 Gradle版本和Gradle插件版本之间存在一定的对应关系。Gradle Wrapper是用来指定项目使用的Gradl…
阅读更多...
javaweb系列-js引入、输出、变量、数据类型、运算符

javaweb系列-js引入、输出、变量、数据类型、运算符

1.1 js介绍 js可以让我们的页面更加的智能&#xff0c;让页面和用户进行交互。 1.2 引入方式 同样&#xff0c;js代码也是书写在html中的&#xff0c;那么html中如何引入js代码呢&#xff1f;主要通过下面的2种引入方式&#xff1a; 第一种方式&#xff1a;内部脚本&#x…
阅读更多...
深度学习第J9周：Inception v3算法实战与解析

深度学习第J9周：Inception v3算法实战与解析

目录 一、理论基础 二、pytorch代码复现1.前期准备 2.代码复现 3.训练运行 3.2指定图片进行预测 三、总结 &#x1f368; 本文为[&#x1f517;365天深度学习训练营]内部限免文章&#xff08;版权归 *K同学啊* 所有&#xff09; &#x1f356; 作者&#xff1a;[K同学啊] &…
阅读更多...
K_A39_001 基于STM32驱动TF卡模块读写数据 串口打印

K_A39_001 基于STM32驱动TF卡模块读写数据 串口打印

K_A39_001 基于STM32驱动TF卡模块读写数据 串口打印 所有资源导航一、资源说明二、基本参数参数引脚说明 三、驱动说明时序对应程序: 四、部分代码说明1、接线引脚定义1.2、STM32F103C8T6TF卡模块 五、基础知识学习与相关资料下载六、视频效果展示与程序资料获取七、注意事项八…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023