formData详细使用教程
2019-08-14 10:06:26来源:博客园 阅读 ()
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/p/11133587.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- javascript面向对象入门基础详细介绍 2020-03-29
- 关于jQuery UI 使用心得及技巧 2020-03-29
- js中去掉字串左右空格 2020-03-20
- Js中如何使用sort() 2020-03-18
- 使用JS在浏览器中判断当前网络连接状态的几种方法 2020-03-12
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash