一、js FromData方法介绍
构造函数
- 创建一个空对象实例
此时可以调用append()方法来添加数据var formData = new FormData();
- 使用已有的表单来初始化一个对象实例
假如现在页面已经有一个表单
我们可以使用这个表单元素作为初始化参数,来实例化一个formData对象<form id="myForm" action="" method="post"> <input type="text" name="name">名字 <input type="password" name="psw">密码 <input type="submit" value="提交"> </form>
// 获取页面已有的一个form表单 var form = document.getElementById("myForm"); // 用表单来初始化 var formData = new FormData(form); // 我们可以根据name来访问表单中的字段 var name = formData.get("name"); // 获取名字 var psw = formData.get("psw"); // 获取密码 // 当然也可以在此基础上,添加其他数据 formData.append("token","kshdfiwi3rh");
操作方法
- fromData里储存数据的方法(key/value)
- 一个key可能对应多个value
- 表单:一个表单字段对应一条数据(HTML的name属性是key值,value属性对应value值)
- 获取值
formData.get("name"); // 获取key为name的第一个值 formData.getAll("name"); // 返回一个数组,获取key为name的所有值
- 添加数据
如果指定的key不存在则会新增一条数据,如果key存在,则添加到数据的末尾formData.append("k1", "v1"); formData.append("k1", "v2"); formData.append("k1", "v1"); formData.get("k1"); // "v1" formData.getAll("k1"); // ["v1","v2","v1"]
- 修改数据
通过set(key, value)来修改数据,如果指定的key不存在则会新增一条,如果存在,则会修改对应的value值。formData.set("k1", "1");
- 判断是否含有该数据
可以通过has(key)来判断是否对应的key值formData.append("k1", "v1"); formData.append("k2",null); formData.has("k1"); // true formData.has("k2"); // true formData.has("k3"); // false
- 删除数据
通过delete(key),来删除数据formData.append("k1", "v1"); formData.append("k1", "v2"); formData.append("k1", "v1"); formData.delete("k1"); formData.getAll("k1"); // []
- 遍历
我们可以通过entries()来获取一个迭代器,然后遍历所有的数据,
也可以通过values()方法只获取value值formData.append("k1", "v1"); formData.append("k1", "v2"); formData.append("k2", "v1"); var i = formData.entries(); i.next(); // {done:false, value:["k1", "v1"]} i.next(); // {done:false, value:["k1", "v2"]} i.next(); // {done:false, value:["k2", "v1"]} i.next(); // {done:true, value:undefined}
formData.append("k1", "v1"); formData.append("k1", "v2"); formData.append("k2", "v1"); var i = formData.values(); i.next(); // {done:false, value:"v1"} i.next(); // {done:fase, value:"v2"} i.next(); // {done:fase, value:"v1"} i.next(); // {done:true, value:undefined}
发送数据
var xhr = new XMLHttpRequest();
xhr.open("post","login");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(formData);
二、FromData的实践
概述:
- FormData 对象的使用:
- 用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name与value组装成
一个queryString - 异步上传二进制文件。
使用:
- FromData对象的操作方法,全部在原型中,自己本身没有任何的属性和方法
- 使用FormData对象发送文件
HTML部分 <form action=""> <label for=""> 姓名: <input type="text" name="name"> </label> <label for=""> 文件:<input id="file" type="file" name="file"> </label> <label for=""> <input type="button" value="保存"> </label> </form>
JS部分 var btn = document.querySelector('[type=button]'); btn.onclick = function () { // 文件元素 var file = document.querySelector('[type=file]'); // 通过FormData将文件转成二进制数据 var formData = new FormData(); // 将文件转二进制 *****注意2****** formData.append('upload', file.files[0]); *****注意1****** var xhr = new XMLHttpRequest; xhr.open('post', 'file.php'); // 监听上传进度 xhr.upload.onprogress = function (ev) { // 事件对象 // console.log(ev); var percent = (ev.loaded / ev.total) * 100 + '%'; console.log(percent); progress.style.width = percent; } xhr.send(formData); xhr.onreadystatechange = function () { if(xhr.readyState == 4 && xhr.status == 200) { // } } }
- 注意1:使用jQuery
$.ajax({ url: 'file.php', type: 'POST', data: formdata, // 上传formdata封装的数据 dataType: 'JSON', cache: false, // 不缓存 processData: false, // jQuery不要去处理发送的数据 contentType: false, // jQuery不要去设置Content-Type请求头 success:function (data) { //成功回调 console.log(data); } });
文章参考自:https://blog.csdn.net/AlbenXie/article/details/100103709