formdata是ajax2.0(xmlhttprequest level2)新提出的接口,利用formdata对象可以将form表单元素的name与value进行组合,实现表单数据的序列化,从而介绍表单元素的拼接,提高工作效率
var formdata=new formdata(form); // 通过append()方法追加数据 formdata.append("name","lori");
formdata提供的方法
向 formdata
中添加新的属性值,如果formdata
对应的属性值存在则覆盖原值,否则新增一项属性值。
给 formdata
设置属性值,如果formdata
对应的属性值存在则覆盖原值,否则新增一项属性值
返回在 formdata
对象中与给定键关联的第一个值
返回一个包含 formdata
对象中与给定键关联的所有值的数组。
formdata.delete():从formdata对象里面删除一个键值对
返回一个布尔值表明 formdata
对象是否包含某些键
返回一个包含所有键的iterator
对象
返回一个包含所有值的iterator
对象。
返回一个包含所有键值对的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) { //... } } }
如对本文有疑问, 点击进行留言回复!!
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json?Protocol Buffer?FlatBuffers?
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论