李俊霏

今天小编跟大家讲解下有关formData详细使用教程 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关formData详细使用教程 的相关资料，希望小伙伴们看了有所帮助。

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) { //... } } }

来自：https://www.cnblogs.com/cythia/archive/2019/07/04/11133587.html

来源：爱蒂网