js FormData 使用笔记

最新推荐文章于 2025-11-28 18:25:02 发布
原创 最新推荐文章于 2025-11-28 18:25:02 发布 · 6.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ajax #前端 #javascript #formdata

本文介绍FormData在前端开发中的应用，包括替代form.serialize获取表单数据、配合ajax实现文件上传及动态设置提交内容的方法。

formdata的使用笔记。

做一些前端交互时用到了FormData，这里做一些记录。
1. FormData可以用来替代form.serialize()来获得form里的数据；
2. FormData可以配合ajax方法实现文件上传，但需要设置ajax参数async: false,cache: false,contentType: false,processData: false,；
3. 通过formdataobj.append(key, value)可以动态设置提交表单内容，但value仅限string类型的值或File类型的值，或者Blob类型的值。如果想传入数组，可以多次使用formdataobj.append('key[]','key1');formdataobj.append('key[]','key2');；文件也是一样的。

FormData在MDN的文档

13 使用Vue + FormData + axios实现图片上传功能实战_vue formdata上传图片(1)
2401_84411822的博客
04-27 280
上节回顾上一小节中，我们添加了Vue-router的路有数据，这些数据都将是后续实战课程中的真实路由数据了。同时引入了ElementUI的el-menu做为左侧菜单的组件，但本专栏的特点就是遇到第三方功能和组件，自己尽量也要实现一遍，所以，在文章末尾又自己实现了一个tg-menu的组件。使用Vue+Vue-router+el-menu实现菜单功能实战本节介绍本小节已经是专栏的第11篇博客了，这一节本来是准备开始做图书信息上传的，但考虑到图书信息上传中，有个图片上传的功能点，需要单独抽出一节来说。
Ajax基础到实战（四）——formData对象_ajax formdata(1)
2401_84438654的博客
04-28 1164
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
js java 图片上传_js formData图片上传（单图上传、多图上传）后台java
weixin_42356378的博客
02-13 300
单图上传头像单图 js$('#upimg').on('change',function(){ //选中图片后展示在页面var filePath = $(this)[0].files[0].name //获取到input的value，里面是文件的路径//console.log(f...
FormData
小菜张的博客
07-02 299
FormData formData里面存储的数据是以健值对的形式存在的，key是唯一的，一个key可能对应多个value。 如果是使用表单初始化，每一个表单字段对应一条数据，它们的HTML name属性即为key值，它们value属性对应value值。 内置API方法 FormData.append //通过append(key, value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾 FormData.delete //delete(key)删除数据 FormD
formData 传参 如何传数组
最新发布
一只猫
11-28 231
HTTP协议本身不支持数组传输，但可通过三种方法实现：1)重复键名，后端自动解析为数组；2)转为JSON字符串，需后端手动解析；3)使用逗号分隔字符串，后端需拆分处理。这三种方式都能解决HTTP表单传递数组的问题，开发者可根据项目需求选择合适方案。
JS中 new FormData() - FormData对象的作用及用法
努力努力再努力的博客
06-08 9260
JS中 new FormData() - FormData对象的作用及用法 js FormData 方法介绍 formData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化,从而介绍表单元素的拼接,提高工作效率 首先我们需要先创建一下 这个 FormData 对象 var formData = new FormData(); // 空的实例对象 // FormData() 实例的
formData.append
qq_44080018的博客
12-15 1954
然后，通过formData.append方法，将文本输入框的值和文件上传框的值添加到FormData对象中。在发送FormData对象之前，可以使用console.log(formData)来查看FormData对象的内容，以确保数据被正确添加。我们可以使用formData.append来将这些输入框的值添加到FormData对象中，然后将其发送到服务器。使用formData.append可以将键值对添加到FormData对象中，这样可以方便地将数据以键值对的形式发送到服务器。
java前端js之formData的使用方法
阿尔法小师妹
04-11 1463
1.formData 的功能 1.1通过name-value的键值对形式，实现动态的form表单数据的序列化。 1.2 异步上传部分表单信息与文件信息，即不是与表单所有的信息一起提交传入后台，可以是部分表单信息与文件先提交后台，把提交后反馈的信息与剩余表单信息再同步提交，最终实现文件与部分表单信息的异步上传。 2.formData的使用方法 2.1 创建for...
js formdata 请求头
08-22
在使用 `FormData` 发送请求时，通常不需要手动设置 `Content-Type` 请求头，因为浏览器会自动根据请求内容生成合适的类型标识。如果手动设置为 `application/x-www-form-urlencoded`，可能会导致后端接收到的数据...
js使用formdata将map类型的数据传给后端
11-06
我们正在处理一个关于如何在JavaScript中使用FormData将Map类型数据传递给后端的问题。 由于FormData的append方法通常只接受字符串作为键和值，而Map的键和值可以是任意类型，因此我们需要将Map转换为FormData能够...
Ajax基础到实战（四）——formData对象_ajax formdata
2401_84438654的博客
04-28 1557
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
form-data-helper:替换 FormData 对象的 Javascript 插件。 用例
06-12
表单数据助手 替换 FormData 对象的 Javascript 插件。 用例：IE9 及以下。 代码示例 formDataHelper . module . settings . target = 'formDataUpload' ; formDataHelper . module . settings . action = '/IFrameTestHandler.ashx' ; formDataHelper . module . createFormData ( parameters , files , false ) ; formDataHelper . module . createIframe ( 'formDataUpload' , null ) ; formDataHelper . module . submitFormData ( ) ; 动机 有几个插件可以解决这个问
formdatabuilder:Web Workers的替代FormData对象
05-26
FormDataBuilder 这是Web Workers中的另一个对象。 它不是polyfill，但具有相似的界面，可以创建blob以通过XHR2发送。 为什么 当我们通过multipart / form-data上传文件时， FormData对象非常有用。 但是，根据我的调查，在Web Workers中，目前似乎无法使用它，但Chrome浏览器除外。 如果可以创建polyfill会更好，但是这可能是不可能的，因为至少从二进制转换为字符串存在问题。 原料药 建设者 var form = new FormDataBuilder ( ) ; 追加（名称，值） form . append ( 'name' , 'John Smith' ) ; form . append ( 'photo' , file ) ; getBlob（） var blob = form . getBlob
new FormData() - FormData对象的作用及用法
热门推荐
AlbenXie的博客
08-27 9万+
一、js FormData方法介绍 1. 概述 FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。 2. 构造函数 创建一个formData对象实例有几种方式： 1、创建一个空对象实例 var formData = new FormData(); 此时可以调用append()方法来添加数...
表单提交 FormData.append()
weixin_44743508的博客
07-20 5683
表单提交 FormData.append() append()接口会添加新的值到FormData表单之中 如果该键存在，则把该值新加到键中 如果键不存在，则新增这个键 该方法接受3个参数 formData.append(name,value,filename) name 在个是在服务端的value中包含的数据对应的表单名称 value 表单的值，可以是string或者是Blob类型（以后端接受的类型为准） filename() 【可选】 传给服务器的一个名称，文件名会被放在 “Con
FormData用法详解
weixin_45585996的博客
09-17 640
FormData的基本用法 html代码（创建表单元素） <form id='form> <input type='text' name='name' />名字 <input type='password' name='password' />密码 </form> js代码（创建formData空对象） // 创建formData空对象 var formData = new FormData() 如何根据form表单将表单数据一并添加到for
FormData 对象
m0_54007573的博客
06-17 750
FormData对象
formData的使用
要输就输给追求吧！
09-22 3840
这两天公司大佬让我重写一个内部使用软件的页面，我蹭蹭蹭的就给他把静态页面写完了，之后就是请求，可把我难死了，其中遇到两个大问题，一个是跨域请求，还没解决，谁来帮帮我啊？？另一个是表单提交，用formData，现记录如下。一、认识formData　　XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模
IE10以下不兼容FormData，使用ajaxSubmit快速替换的方法 .NET MVC
iwusan
12-03 701
1.下载 jquery-form.js，并引用 2.form表单包含input tyle='file' <form id="uploadFileForm" name="uploadFileForm" enctype="multipart/form-data" method="post"> --此处input 必须包含name，否则后台会接收不到值 <...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LeetJoe

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值