前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >FormData对象

FormData对象

作者头像
大道七哥
发布于 2019-09-10 13:06:38
发布于 2019-09-10 13:06:38
3K0
举报
文章被收录于专栏:大道七哥大道七哥

FF4中增加了一个很有意思的对象,FormData。通常我们提交(使用submit button)时,会把form中的所有表格元素的name与value组成一个queryString,提交到后台。这用jQuery的方法来说,就是serialize。但当我们使用Ajax提交时,这过程就要变成人工的了。因此,FormData对象的出现可以减少我们一些工作量。

想得到一个FormData对象,很简单:

var formdata = new FormData();

但一个空的FormData对象对我们没有意义,因此W3c草案提供了三种方案来获取或修改FormData。

方案1:创建一个空的FormData对象,然后再用append方法逐个添加键值对:

var formdata = new FormData();

formdata.append("name", "司徒正美");

formdata.append("blog", "http://www.cnblogs.com/rubylouvre/");

方案2:取得form元素对象,将它作为参数传入FormData对象中!

var formobj = document.getElementById("form");

var formdata = new FormData(formobj);

方案3:利用form元素对象的getFormData方法生成它!

var formobj = document.getElementById("form");

var formdata = formobj.getFormData()

注意,formdata是一个不透明的对象,现在暂时只有一个append可以操作,不能通过序列化手段得到其里面的内容,这实在是遗憾。它的用法现在也只有一个,用于增强型的XMLHttpRequest对象的send方法中去!

var formElement = document.getElementById("myFormElement");

formData = formElement.getFormData();

formData.append("serialnumber", serialNumber++);

xhr.send(formData);

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015-04-03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Ajax第四节
注意:我们现在使用new XMLHttpRequest创建的对象就是2.0对象了,我们之前学的是1.0的语法,现在学习一些2.0的新特性即可。
用户3461357
2019/08/02
6900
FormData对象的应用
XMLHttpRequest 是一个浏览器接口,通过它,我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2 月,XMLHttpRequest Level 2 草案提出来了,相对于上一代,它有一些新的特性,其中 FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单、模拟表单提交,当然最大的优势就是可以上传二进制文件。
OECOM
2020/07/02
1.8K0
Form​Data 对象的使用
FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。如果表单enctype属性设为multipart/form-data ,则会使用表单的submit()方法来发送数据,从而,发送数据具有同样形式。
挨踢小子部落阁
2023/03/16
1.2K0
Form​Data 对象的使用
【重要】你不得不知道的文件上传进度提示
当上传的文件相对较大时,用户可能需要等待较长的时间,这个时候前端如果没有任何提示的话,体验不是很好,如果有上传进度提示,就会好很多。而要在上传过程实时显示上传进度,则需要已上传的大小和文件总大小。
胡哥有话说
2019/07/25
1.1K0
你还在手动拼接ajax数据吗?还不会通过ajax实现文件上传?
通过Formdata你就不用手动拼接表单元素的值了如name:sdd&pwd:dsf... 或许你会疑惑我为什么要手动拼接表单值,直接提交不就行了吗?有些时候我们会通过ajax提交表单,通过ajax提交表单时我们不得不手动拼接表单值,数量少还好数量多很容易出错,写着也烦,此处笔者深有体会啊, 不仅如此Formdata支持文件上传,这就意味着你可以通过ajax实现异步文件这在web开发中太有用了,此博客后台上传文件就是通过Formdata
切图仔
2022/09/08
6140
FormData使用方法详解
张培跃 ID:laozhangsishu 不止于前端 关注 FormData的主要用途有两个: 1、将form表单元素的name与value进行组合,实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率。 2、异步上传文件 一、创建formData对象 1、创建一个空对象: //通过FormData构造函数创建一个空对象 var formdata=new FormData(); //可以通过append()方法来追加数据 formdata.append("name","laotie");
用户1272076
2019/03/27
1.8K0
XMLHttpRequest2-FormData上传文件方法封装及进度条的实现
版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/article/details/51240496
空空云
2018/09/27
1.1K0
通过Ajax方式上传文件(input file),使用FormData进行Ajax请求
<div > <input type="file" name="FileUpload" id="FileUpload"> <a class="layui-btn layui-btn-mini" id="btn_uploadimg">上传图片</a> </div> <script type="text/jscript"> $(function () {
纯粹是糖
2018/03/14
6.6K0
HTML5 FormData 方法介绍以及实现文件上传
XMLHttpRequest 是一个浏览器接口,通过它,我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2 月,XMLHttpRequest Level 2 草案提出来了,相对于上一代,它有一些新的特性,其中 FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单、模拟表单提交,当然最大的优势就是可以上传二进制文件。下面就具体介绍一下如何利用 FormData 来上传文件。
全栈程序员站长
2022/11/17
2.2K0
HTML5 FormData 方法介绍以及实现文件上传
前端处理图片上传的几种方式
在用html5实现图片预览功能这篇文章中只是介绍了图片上传过程中预览的实现,那关于图片上传有哪几种方式呢?
挥刀北上
2019/08/06
5.3K0
java怎么做带进度条的上传
在Java中实现带进度条的文件上传功能通常涉及到前后端的配合工作。前端负责收集文件并展示上传进度,后端负责接收和处理文件,并提供进度信息给前端。
JaneYork
2024/05/25
1850
写给新手前端的各种文件上传攻略,从小图片到大文件断点续传
今年国庆假期终于可以憋在家里了不用出门了,不用出去看后脑了,真的是一种享受。这么好的光阴怎么浪费,睡觉、吃饭、打豆豆这怎么可能(耍多了也烦),完全不符合我们程序员的作风,赶紧起来把文章写完。
coder_koala
2019/11/04
3.3K0
写给新手前端的各种文件上传攻略,从小图片到大文件断点续传
《大胖 • 小课》- 玩玩多文件配多进度上传
这是《大胖小课》栏目的专题一《说说文件上传那些事儿》的第4节-《玩玩多文件配多进度上传》
zz_jesse
2020/03/17
6220
XMLHttpRequest Level 2 使用指南
XMLHttpRequest是一个浏览器接口,使得Javascript可以进行HTTP(S)通信。 最早,微软在IE 5引进了这个接口。因为它太有用,其他浏览器也模仿部署了,ajax操作因此得以诞生。 但是,这个接口一直没有标准化,每家浏览器的实现或多或少有点不同。HTML 5的概念形成后,W3C开始考虑标准化这个接口。2008年2月,就提出了XMLHttpRequest Level 2 草案。 这个XMLHttpRequest的新版本,提出了很多有用的新功能,将大大推动互联网革新。本文就对这个新版本进行详
ruanyf
2018/04/12
1.1K0
XMLHttpRequest Level 2 使用指南
介绍几个常见的 AJAX 实例,帮助你更好地理解和运用 AJAX 技术
AJAX(Asynchronous JavaScript and XML)是一种用于在浏览器和服务器之间进行异步通信的技术。它通过在后台发送 HTTP 请求并异步获取响应,实现了无需刷新整个页面的数据交互。通过 AJAX,可以在不打断用户操作的情况下,在网页中更新部分内容,提高用户体验。
网络技术联盟站
2023/07/07
6200
关于ajax无刷新上传和下载
这是一个没什么含量但是又用的比较多又不得不说的问题,其实真的不想说,因为没什么好说的。
chuchur
2022/10/25
2.7K0
同源和跨域详解_如何实现跨域
举例来说,这个网址http://www.example.com/dir/page.html协议是http://,
全栈程序员站长
2022/09/20
1.1K0
ajax全套
对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上。
菲宇
2019/06/13
3.2K0
ajax全套
前端本地文件操作与上传
前端无法像原生APP一样直接操作本地文件,否则的话打开个网页就能把用户电脑上的文件偷光了,所以需要通过用户触发,用户可通过以下三种方式操作触发:
IT派
2018/08/10
1.7K0
前端本地文件操作与上传
【通信】前端中的几类数据交互方式
服务器 res.setHeader(‘Access-Control-Allow-Origin’,‘*’);
前端修罗场
2023/10/07
3510
【通信】前端中的几类数据交互方式
相关推荐
Ajax第四节
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档