formData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化,从而介绍表单元素的拼接,提高工作效率

创建formData对象

 var formData=new FormData(form);
// 通过append()方法追加数据
formData.append("name","Lori");

FormData提供的方法

FormData.append()

向 FormData 中添加新的属性值,如果FormData 对应的属性值存在则覆盖原值,否则新增一项属性值。

FormData.set()

给 FormData 设置属性值,如果FormData 对应的属性值存在则覆盖原值,否则新增一项属性值

FormData.get()

返回在 FormData 对象中与给定键关联的第一个值

FormData.getAll()

返回一个包含 FormData 对象中与给定键关联的所有值的数组。

FormData.delete():从FormData对象里面删除一个键值对

FormData.has()

返回一个布尔值表明 FormData 对象是否包含某些键

FormData.keys()

返回一个包含所有键的iterator对象

FormData.values()

返回一个包含所有值的iterator对象。

FormData.entries()

返回一个包含所有键值对的iterator对象

兼容性:

下面能我们就使用下面的例子来给大家演示一下怎么使用:

创建表单:

 <form id="userForm">
<p>姓名:<input type="text" name="userNamee" value="李白"></p>
<p>性别:<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female" >女
</p>
<p>城市:<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select></p>
<p><input type="button" id="btn" value="添加"></p>
</form>

操作方法

let btn = document.getElementById("btn");
btn.onclick = function () {
// 根据ID获得页面中的form表单元素
var form = document.querySelector("#userForm");
// 将获得的表单元素作为参数,对formData进行初始化
var formData = new FormData(form);
formData.append("name", "Lori");
formData.append("name", "Jack");
formData.append("gender", "Jacie");
// 通过get方法只能读取第一个key为name的值
console.log(formData.get("name")); // Lori
// 通过getAll方法能获取到所有key为name的值
console.log(formData.getAll("name")); //["Lori","Jack"]
// 通过set修改数据,如果存在多个的话,就会改到只剩下一个key为name的值
formData.set('name', "李白"); // ["李白"]
// 如果不存在的话,就会添加一条数据
formData.set('age', 30);
console.log(formData.getAll('name'));
console.log(formData.getAll('age'));
// 通过delete方法删除key为gender的数据
formData.delete("gender");
console.log(formData.get('gender')); // null for (let keys of formData.keys()) {
console.log(keys); // userName sex city name age
} for (let keys of formData.entries()) {
console.log(keys); // ["userNamee", "李白"] ["sex", "male"] ["city", "1"] ["name", "李白"] ["age", "30"]
} for (let keys of formData.values()) {
console.log(keys);
}
}

文件上传

下面我们来做一个文件上传的例子:

创建表单
<form id="userForm">
<p>姓名:<input type="text" name="userNamee" value="李白"></p>
<p>性别:<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
</p>
<p>城市:<select name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select></p>
<p>
头像:<input type="file" name="headImg"></p>
</p>
<p><input type="button" id="btn" value="添加"></p>
</form>
发送数据
 let btn = document.getElementById("btn");
btn.onclick = function () { var formdata=new FormData(document.getElementById("userForm"));
var xhr = new XMLHttpRequest();
xhr.open("post", "file.php"); // 监听上传进度
xhr.upload.onprogress=function(ev){
let percent=(ev.loaded/ev.total)*100+'%';
console.log(percent)
}
xhr.send(formdata); xhr.onload = function () {
if (xhr.status == 200) {
//...
}
} }

formData详细使用教程的更多相关文章

  1. SSM框架——详细整合教程

    SSM框架——详细整合教程(Spring+SpringMVC+MyBatis) 1.基本概念   1.1.Spring Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Jav ...

  2. gulp详细入门教程

    本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...

  3. 在虚拟机中安装红旗桌面7.0 Linux操作系统的详细图文教程

    本文作者:souvc 本文出处:http://www.cnblogs.com/liuhongfeng/p/5343087.html 以下是详细的内容: 一.安装虚拟机. 安装虚拟机可以参考:在Wind ...

  4. win8.1系统的安装方法详细图解教程

    win8.1系统的安装方法详细图解教程 关于win8.1系统的安装其实很简单 但是有的童鞋还不回 所以今天就抽空做了个详细的图解教程, 安装win8.1系统最好用U盘安装,这样最方便简单 而且系统安装 ...

  5. 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程之更改图片和附件上传路径

    本文是接上一篇博客,如果有疑问请先阅读上一篇:百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程 默认UEditor上传图片的路径是,编辑器包目录里面的net目录下 下面就演示如 ...

  6. 详细整合教程(Spring+SpringMVC+MyBatis)

    详细整合教程(Spring+SpringMVC+MyBatis) http://blog.csdn.net/gebitan505/article/details/44455235/

  7. ant使用指南详细入门教程

    这篇文章主要介绍了ant使用指南详细入门教程,本文详细的讲解了安装.验证安装.使用方法.使用实例.ant命令等内容,需要的朋友可以参考下 一.概述 ant 是一个将软件编译.测试.部署等步骤联系在一起 ...

  8. gulp详细入门教程(转载)

    本文转载自: gulp详细入门教程

  9. [Oracle] SQL*Loader 详细使用教程(2)- 命令行参数

    sqlldr工具   SQL*Loader的客户端工具是sqlldr,在操作系统的命令行下输入sqlldr,后面不接任何参数,将显示帮助信息如下所示(所有命令行参数的简单描述及其默认值),所以你并不需 ...

随机推荐

  1. 没有该栏目数据, 可能缓存文件(/data/cache/inc_catalog_base.inc)没有更新, 请检查是否有写入权限

    今天朋友在创建新栏目时出现了一个无法生成的错误,提示没有该栏目数据, 可能缓存文件(/data/cache/inc_catalog_base.inc)没有更新, 请检查是否有写入权限,其实这个相对比较 ...

  2. amp加载速度比标准移动页面快85%

    6月13日,谷歌合作伙伴大会上Oliver Vidinovski先生(Google Global Head of eCommerce - CS/GCS) 释放了一个信息:amp加载速度比标准移动页面快 ...

  3. NOIP 2008 火柴棒等式

    洛谷 P1149 火柴棒等式 洛谷传送门 JDOJ 1540: [NOIP2008]火柴棒等式 T2 JDOJ传送门 Description 给你n根火柴棍,你可以拼出多少个形如"A+B=C ...

  4. ubuntu16.04深度学习环境配置

    https://www.lizenghai.com/archives/14651.html https://blog.csdn.net/qq_40936141/article/details/8119 ...

  5. face-api.js:一个在浏览器中进行人脸识别的 JavaScript 接口

    Mark! 本文将为大家介绍一个建立在「tensorflow.js」内核上的 javascript API——「face-api.js」,它实现了三种卷积神经网络架构,用于完成人脸检测.识别和特征点检 ...

  6. Java 内存分配(转)

    Java程序运行在JVM(Java Virtual Machine,Java虚拟机)上,可以把JVM理解成Java程序和操作系统之间的桥梁,JVM实现了Java的平台无关性. 寄存器:JVM内部虚拟寄 ...

  7. 学习:API断点

    API的介绍:API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而 ...

  8. 第二章python中的一切皆对象

    1.函数和类也是对象,属于python的一等公民 赋值给一个变量 可以添加到集合对象之中 可以作为参数传递给函数 可以当作函数的返回值 def ask(name="ask_wzh" ...

  9. Springboot之自定义配置

    SpringBoot自定义配置 springboot在这里就不过多介绍了,大家都应该了解springboot零配置文件,所以配置信息都装配在属性文件(properties.yml.yaml)中,有时我 ...

  10. 认识随机函数rand()和srand(unsigned int )

    rand函数 int rand( void ); 函数名:   rand 功   能:   随机数发生器 用   法:   int rand(void); 所在头文件: stdlib.h 函数说明 : ...