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. 4、组件注册-自定义TypeFilter指定过滤规则

    4.组件注册-自定义TypeFilter指定过滤规则 4.1 FilterType.ANNOTATION 按照注解方式 4.2 FilterType.ASSIGNABLE_TYPE 按照给定的类型 @ ...

  2. 博客索引and题目列表

    目录 笔记整理 计划 要学的东西 缺省源 要做的题 搜索 高斯消元 矩阵 排列组合 2019.7.9 2019.7.10 kmp ac自动机 2019.7.11 2019.7.15 笔记整理 1.同余 ...

  3. Nothing to say

    1. This moment will nap, you will have a dream; but this moment study, you will interpret a dream.此刻 ...

  4. java 查找指定包下的类

    package com.jason.test; import java.io.File; import java.io.IOException; import java.io.UnsupportedE ...

  5. c++ builder调用sql server的存储过程进行数据的下载和上传

    小小的几行代码,在这里搞了一天.好好的一个周六过的无比的难受.代码很简单,但是主要原因是因为在用合作商的软件上传数据的时候有些框框没有勾选. come on....... 1.用两个控件ADOConn ...

  6. linux alias写快捷键笔记

    linux alias写快捷键笔记<pre>#vi ~/.bashrc ps:~找个代表当前登录用户的用户目录 pwd就知道了alias phpfpmrestart='/usr/local ...

  7. [原创]K8Cscan插件之Host2IP(批量域名解析/主机名转IP)

    0x001 前言 在内网渗透中,有时候通过域或日志导出一些机器名,或者管理员备分文件等方式获取 只有主机名或者域名时,就需要先解析出IP获取相关IP或IP段,才好进行下一步扫描. 0x002 用法 首 ...

  8. 管道通信——FIFO的代码实现

    一.用到的函数 umask         linux中的 umask 函数主要用于:在创建新文件或目录时 屏蔽掉新文件或目录不应有的访问允许权限.         文件的访问允许权限共有9种,分别是 ...

  9. failed to open stream: operation failed

    # composer require oygza/aliyun-php-sdk-afs You are running composer with xdebug enabled. This has a ...

  10. Mysql 8.0版本开始,不允许创建 MyISAM 分区表

    从MySQL 8.0版本开始,就不允许创建 MyISAM 分区表了,只允许创建已经实现了本地分区策略的引擎. 到目前为止,只有InnoDB和NDB这两个引擎支持本地分区策略. [1]实际测试 (1)数 ...