FormData对象的使用
一、概述
FormData类型是XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据提供便利。
作用:1.利用一些键值对来模拟一系列表单控件:即将form中的所有表单元素的name和value组装成一个queryString;2.异步上传二进制文件。
与普通Ajax相比,使用FormData的最大优点:可以异步上传二进制文件。
二、使用
1.创建FormData对象方式
1).let formdata = new FormData(); 创建一个空的FormData对象,可以使用formdata.append(key,value)来添加数据。
2).let formdata = new FormData(form); 使用已有的表单来初始化一个FormData对象。
<form id="upload" method="post" action="">
<input type="text" name="username" value=""/>
<input type="password" name="paw" value=""/>
<input type="button" value="提交"/>
</form>
//获取一个form表单对象
let form = document.getElementById("form");
//用这个表单对象来初始化FormData对象
let formdata = new FormData(form);
//我们可以通过name来访问表单中的字段
formdata.get("username"); //获取username的值
formdata.get("pwd"); //获取pwd的值
//我们也可以添加数据
formdata.append("token","fegahgag54");
2.数据形式
首先,我们要明确FormData里面存储的数据形式,一对key/value组成一条数据,key是唯一的,一个key可能对应多个value。如果使用表单初始化FormData对象,每一个表单字段对应一条数据,他们的name属性值对应key值,value属性值对应value值。
3.操作方法
3.1获取数据 formdata.get(key)
formdata.get("username"); //获取key为username的第一个值
formdata.getAll("username"); //获取key为username的所有值,返回一个数组
3.2添加数据 formdata.append(key,value)
formdata.append("k1","v1");
formdata.append("k1","v2");
formdata.append("k2","v2"); formdata.getAll("k1"); //["v1","v2"]
formdata.get("k2"); //"v2"
3.3设置/修改数据 formdata.set(key,value)如果key不存在则新增一条数据,如果存在,则会修改对应的value值。
formdata.append("k1","v1");
formdata.set("k1","v2");
formdata.get("k1"); //"v2"
3.4判断是否存在某条数据 formdata.has(key),存在返回true,不存在返回false。
formdata.append("k1","v1");
formdata.has("k1"); //true
formdata.has("k2"); //false
3.5删除数据 formdata.delete(key);
formdata.append("k1","v1");
formdata.delete("k1");
formdata.get("k1"); //null
3.6遍历 通过entries()或values()来获取一个遍历器
formdata.append("k1","v1");
formdata.append("k2","v2");
for(let [key,value] of formdata.entries()){
console.log(key +":"+ value)
}
输出:
"k1:v1"
"k2:v2"
formdata.append("k1","v1");
formdata.append("k2","v2");
for(let value of formdata.values()){
console.log(value)
}
输出:
"v1"
"v2"
4.发送数据(上传文件不刷新页面)
<input type="file" id="upload"/>
<input type="button" id="upload-btn" value="上传"/>
let btn = document.getElementById("upload-btn");
btn.onclick = function(){
let file = document.getElementById("upload");
let formdata = new FormData();
formdata.append("file",file.files[0]);
fetch("https://www.baidu.com",{
method:'POST',
body:formdata
}).then(d=>{
console.log("result is" + d);
alert("上传成功");
})
}
三、浏览器兼容性
参考:
https://www.cnblogs.com/lhb25/p/html5-formdata-tutorials.html
https://segmentfault.com/a/1190000012327982
https://segmentfault.com/a/1190000006716454
FormData对象的使用的更多相关文章
- 通过Ajax使用FormData对象无刷新上传文件
写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...
- H5 FormData对象的使用
XMLHttpRequest Level2 添加了一个新的接口--FormData .[ 主要用于发送表单数据,但也可以独立使用于传输键控数据.与普通的Ajax相比,它能异步上传二进制文件 ] 利用F ...
- html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)
/** FormData ==>表单数据 能自动把表单数据拼接打包 当ajax发送数据时,发送打包的数据; 还可以使用FormData对象的append(key,value)添加数据 FormD ...
- HTML的FormData对象
FormData是HTML5标准制定的一个新的封装对象,有了FormData对象,可以方便地通过javascript创建表单数据,直接以ajax发送到服务器中. 目前浏览器的支持情况为: 详细的介绍与 ...
- 通过jQuery Ajax使用FormData对象上传文件
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...
- FormData对象
FF4中增加了一个很有意思的对象,FormData.通常我们提交(使用submit button)时,会把form中的所有表格元素的name与value组成一个queryString,提交到后台.这用 ...
- Ajax发送FormData对象封装的表单数据
前端页面: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...
- 使用JS的FormData对象
利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 创建一个FormData对象 你可以先创建一个空的F ...
- FormData+Ajax 实现多文件上传 学习使用FormData对象
FormData对象是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利. 今天我们使用dropzone和FormData实现多文件上传功能. var SAMP = null; / ...
- 使用HTML5 FormData对象实现大文件分块上传(断点上传)功能
FormData是HTML5新增的一个对象,通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对.它可以更灵活方便的发送表单数据,因为可以独立于表单使用.如果你把表单 ...
随机推荐
- git 包教包会
# Git全面解析 版本控制工具:VSS.CVS.SVN.Git等,其中Git属于绝对霸主地位. 注意:一般版本控制工具包含两部分 客户端(本地):本地编写内容以及版本记录 服务端(网盘):将内容和版 ...
- nova scheduler filters 配置
scheduler_driver = nova.scheduler.filter_scheduler.FilterScheduler scheduler_default_filters = Avail ...
- samba 配置文件解析
[global] #定义全局策略 workgroup=MYGROUP #定义工作组 netbios name=MYSERVER #指定NetBios名称 interfaces=lo 192.168.1 ...
- linux配置防火墙和重启防火墙
1.在linux系统里面找到并打开编辑配置防火墙的文件,执行命令: vi /etc/sysconfig/iptables. 2.在上面打开的文件里面加入一下语句: -A INPUT -m state ...
- Git入门基础详情教程
前言 写了一篇文章<一篇文章了解Github和Git教程>还觉得不错,继续写了<为了Github默默付出,我想了解你>,那么继续写Git 基础知识. Git 官网:https: ...
- 使用pipenv隔离不同项目的依赖包
pipenv可以为不同的路径创建python环境和依赖包,结合pyenv可以达到为不同项目使用不同python版本,不同依赖包的目的. pip install pipenv #安装pipenv 使用p ...
- [EXP]phpBB 3.2.3 - Remote Code Execution
// All greets goes to RIPS Tech // Run this JS on Attachment Settings ACP page var plupload_salt = ' ...
- [每天解决一问题系列 - 0007] 如何创建Catalog并用其签名
问题描述: 校验一组文件的完整性 解决方法: https://msdn.microsoft.com/en-us/library/windows/desktop/aa386967(v=vs.85).as ...
- Python解析HDF文件 分类: Python 2015-06-25 00:16 743人阅读 评论(0) 收藏
前段时间因为一个业务的需求需要解析一个HDF格式的文件.在这之前也不知道到底什么是HDF文件.百度百科的解释如下: HDF是用于存储和分发科学数据的一种自我描述.多对象文件格式.HDF是由美国国家超级 ...
- OkHttp3 任务队列
OkHttp3 有两种运行方式: 1.同步阻塞调用并且直接返回: 2.通过内部线程池分发调度实现非阻塞的异步回调; 下面讲的是非阻塞异步回调,OkHttp在多并发网络下的分发调度过程,主要是Dispa ...