【书山有路勤为径,学海无涯苦作舟】
//一、FormData背景介绍
//表单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西。自从有了HTML5的FormData后,轻松解决上传问题啦。
//FormData可以把它理解成一个虚拟的表单对象,它只有一个方法append,这个可以在浏览器console一下就知道了。我们可以通过append向FormData里面添加各种需要提交的数据。
//你可以先创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段,如下:var oMyForm = new FormData();
//二、FormData的使用
//1、使用FormData对象发送文件
//获取页面form表单
var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {
var oOutput = document.querySelector("div");
//使用上面已有的表单来初始化一个对象实例
var oData = new FormData(form);
//添加数据方法append()
oData.append("CustomField", "This is some extra data");
//异步对象
var oReq = new XMLHttpRequest();
oReq.open("POST", "stash.php", true);
oReq.onload = function(oEvent) {
if(oReq.status == 200) {
oOutput.innerHTML = "Uploaded!";
} else {
oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.
";
}
};
oReq.send(oData);
ev.preventDefault();
// ev.stopPropagation()
//冒泡阶段执行,默认,从子节点传递到父节点
}, false);
//2、添加数据 --- 我们可以通过append(key, value)来添加数据,如果指定的key不存在则会新增一条数据,如果key存在,则添加到数据的末尾
//formData.append("k1", "v1");
//formData.append("k1", "v2");
//formData.append("k1", "v1");
//formData.get("k1"); // "v1"
//formData.getAll("k1"); // ["v1","v2","v1"]
//3、设置修改数据 --- 我们可以通过set(key, value)来设置修改数据,如果指定的key不存在则会新增一条,如果存在,则会修改对应的value值。
//formData.append("k1", "v1");
//formData.set("k1", "1");
//formData.getAll("k1"); // ["1"]
//4、判断是否有该数据 --- 我们可以通过has(key)来判断是否对应的key值
//formData.append("k1", "v1");
//formData.append("k2",null);
//formData.has("k1"); // true
//formData.has("k2"); // true
//formData.has("k3"); // false
//5、删除数据 --- 通过delete(key),来删除数据
//formData.append("k1", "v1");
//formData.append("k1", "v2");
//formData.append("k1", "v1");
//formData.delete("k1");
//formData.getAll("k1"); // []
//6、遍历 ---可以通过entries()来获取一个迭代器,然后遍历所有的数据,
//var formData = new FormData()
//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:fase, value:["k1", "v2"]}
//i.next(); // {done:fase, value:["k2", "v1"]}
//i.next(); // {done:true, value:undefined}
/*
* 可以看到返回迭代器的规则:
*每调用一次next()返回一条数据,数据的顺序由添加的顺序决定
*返回的是一个对象,当其done属性为true时,说明已经遍历完所有的数据,这个也可以作为判断的依据
*返回的对象的value属性以数组形式存储了一对key/value,数组下标0为key,下标1为value,如果一个key值对应多个value,会变成多对key/value返回
*
* 也可以通过values()方法只获取value值
* */
。。。【待大神指点一二】