FormData使用

于 2019-12-23 14:17:25 发布
阅读量215 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41552977/article/details/103664235
版权

FormData使用

在vue+element的项目开发过程中，遇到文件上传的需求，搜了老半天发现FormData出现的频率很高。

一、主要用途

  1. 将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率
  2. 异步上传文件

二、FormData使用

1、创建formData对象
创建一个空对象
2、通过表单对formData进行初始化
在这里插入图片描述
注意是通过name属性来绑定选中的元素
在这里插入图片描述

三、FormData操作方法

1、通过get(key)与getAll(key)来获取相对应的值
在这里插入图片描述
2、通过append(key,value)在数据末尾追加数据
在这里插入图片描述
3、通过set(key, value)来设置修改数据

key的值不存在，会添加一条数据
在这里插入图片描述
key的值存在，会修改对应的value值
在这里插入图片描述
4、通过has(key)来判断是否存在对应的key值
在这里插入图片描述
5、通过delete(key)可以删除数据
在这里插入图片描述

小圆么
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS FormData对象使用方法实例详解
10-15
主要介绍了JS FormData对象使用方法,结合实例形式详细分析了FormData对象的基本功能、原理及使用方法,需要的朋友可以参考下
FormData使用方法详解
bigcarp的专栏
03-18 5445
https://www.jianshu.com/p/e984c3619019 FormData的主要用途有两个： 1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。 2、异步上传文件 一、创建formData对象 1、创建一个空对象： //通过FormData构造函数创建一个空对象 var formdata=new FormData(); //可以通过append()方法来追加数据 formdata.append("name.
FormData用法详解
热门推荐
前端开发
03-21 8万+
FormData 对象： 一.创建一个formData对象实例的方式 1、创建一个空对象 var formData = new FormData();//通过append方法添加数据 2、使用已有表单来初始化对象 //表单示例 <form id="myForm" action="" method="post"> <input type="text" name...
new FormData() - FormData对象的作用及用法
AlbenXie的博客
08-27 8万+
一、js FormData方法介绍 1. 概述 FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。 2. 构造函数 创建一个formData对象实例有几种方式： 1、创建一个空对象实例 var formData = new FormData(); 此时可以调用append()方法来添加数...
HTML5----FormData实例用法
余农场主
06-26 2805
在网页与后台的交互中，用的最多的网络交互方式之一就是ajax，ajax 是免刷新页面就能从进行post与get方式的提交表单和获取服务端数据，但是在原先的ajax中，是不能携带文件上传的，但是由于h5里面的FormData的出现，让ajax可以直接在网页里面异步上传文件
H5 FormData对象的作用及用法
前端开发技术
08-09 1万+
H5 FormData对象就模拟一个原始的表单格式的数据，以前上传文件非得要用个form包起来，就是和后台约定的一个传输数据格式， FormData就是按照规定的格式，把form中所有表单元素的name与value组装成一个queryString，省去你手工拼接的工作，如果用 过jquery的话，应该知道有个表单序列号的函数，作用和它是一样的，不过FormData还提供了更多的操作方法，全部在
使用FormData实现上传多个文件
12-10
本文实例为大家分享了FormData上传多个文件的具体代码，供大家参考，具体内容如下 由于项目中使用到，特此写个Demo html代码： <html> <head> <title>Title</title> [removed][removed] ...
使用axios请求时,发送formData请求的示例
10-16
今天小编就为大家分享一篇使用axios请求时,发送formData请求的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
js使用formData实现批量上传
01-21
利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二...
使用FormData
ChaoQun
12-28 1052
FormData
关于Formdata的使用心得
指尖的星光的博客
09-22 2548
前言 正文 1、在前端通过ajax或者fetch发送请求时，我们更习惯把数据存在放formData中。存放方式如下： //这是通过fetch发送请求，request只是在外层包装了一下 async function checkboxSingle(param) { let formData = new FormData(); formData.append("name","lis"); ...
FormData使用详解
ALEX_wxy的博客
01-15 707
$scope.uploadImages = function () { //new FormData(document.getElementById("formImage")) let form = document.getElementById("formImage"); let formData = new FormData(form); ...
JavaScript—异步提交表单的6种方式
weixin_30446613的博客
09-14 610
FormData的详细介绍及使用请点击此处，那里对FormData的方法和事件已经表述的非常清楚，这里就不再浪费时间在介绍一遍了。本文主要针对FormData对象的使用以及异步文件上传进行详细的说明。 FormData对象可以让我们组织一个使用XMLHttpRequest对象发送的键值对的集合。它主要用于发送表单数据,但是可以独立于使用表单传输的数据。 1、从头开始创建一个F...
关于__Federico Milano 的电力系统分析工具箱.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
mlab-upenn 研究小组的心脏模型模拟.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
混合图像创建大师matlab代码.zip
最新发布
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
中序遍历二叉树-java版本
04-26
在Java中，实现二叉树的中序遍历同样可以通过递归来完成。中序遍历的顺序是：首先递归地中序遍历左子树，然后访问根节点，最后递归地中序遍历右子树。 在这段代码中，Node类定义了二叉树的节点，BinaryTree类包含一个指向根节点的指针和inOrder方法，用于递归地进行中序遍历。printInOrder方法调用inOrder方法并打印出遍历的结果。 在Main类中，我们创建了一个示例二叉树，并调用printInOrder方法来输出中序遍历的结果。输出应该是：4 2 5 1 3，这表示中序遍历的顺序是左子树（4），然后是根节点（2），接着是右子树的左子树（5），然后是右子树的根节点（1），最后是右子树的右子树（3）。
formdata怎么使用
06-02
FormData 是一种用于在 Ajax 请求中传输表单数据的对象，可以用来上传文件或者提交表单数据。 使用方法如下： 1. 创建一个新的 FormData 对象： ```javascript var formData = new FormData(); ``` 2. 添加表单数据到对象中： ```javascript formData.append('username', 'john'); formData.append('password', '12345'); ``` 3. 添加文件数据到对象中： ```javascript var fileInput = document.getElementById('fileInput'); formData.append('file', fileInput.files[0]); ``` 4. 发送 Ajax 请求： ```javascript var xhr = new XMLHttpRequest(); xhr.open('POST', 'upload.php'); xhr.onload = function() { if (xhr.status === 200) { console.log('Upload successful!'); } else { console.log('Upload failed!'); } }; xhr.send(formData); ``` 在上述代码中，我们通过 append() 方法向 FormData 对象中添加表单数据和文件数据，然后使用 XMLHttpRequest 对象发送 Ajax 请求，并将 FormData 对象作为参数传递给 send() 方法。 注意：FormData 对象只能用于 Ajax 请求，不能用于常规的表单提交。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值