html5 上传 原理,浅谈使用HTML5的FormData上传文件原理！！！

【书山有路勤为径，学海无涯苦作舟】

//一、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值

* */

。。。【待大神指点一二】