浅谈使用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值
             * */
            

 

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