浅谈使用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.<br \/>";
                   }
               };

               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值
           * */

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

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

猜你喜欢