【書山有路勤為徑，學(xué)海無涯苦作舟】

//一、FormData背景介紹

//表單提交，文件上傳是一個常用又十分麻煩的功能，以前要上傳文件通常都是借助插件或者flash來實現(xiàn)，噼里啪啦的加載一大堆東西。自從有了HTML5的FormData后，輕松解決上傳問題啦。

//FormData可以把它理解成一個虛擬的表單對象，它只有一個方法append，這個可以在瀏覽器console一下就知道了。我們可以通過append向FormData里面添加各種需要提交的數(shù)據(jù)。

//你可以先創(chuàng)建一個空的 FormData 對象,然后使用 append() 方法向該對象里添加字段，如下：var oMyForm = new FormData();

//二、FormData的使用

//1、使用FormData對象發(fā)送文件

//獲取頁面form表單

var form = document.forms.namedItem("fileinfo");

form.addEventListener('submit', function(ev) {

var oOutput = document.querySelector("div");

//使用上面已有的表單來初始化一個對象實例

var?? ?oData = new FormData(form);

//添加數(shù)據(jù)方法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()

//冒泡階段執(zhí)行，默認(rèn)，從子節(jié)點傳遞到父節(jié)點

}, false);

//2、添加數(shù)據(jù) ??--- 我們可以通過append(key, value)來添加數(shù)據(jù)，如果指定的key不存在則會新增一條數(shù)據(jù)，如果key存在，則添加到數(shù)據(jù)的末尾

//formData.append("k1", "v1");

//formData.append("k1", "v2");

//formData.append("k1", "v1");

//formData.get("k1"); ? ?? ?// "v1"

//formData.getAll("k1"); ??? ?// ["v1","v2","v1"]

//3、設(shè)置修改數(shù)據(jù) ?--- 我們可以通過set(key, value)來設(shè)置修改數(shù)據(jù)，如果指定的key不存在則會新增一條，如果存在，則會修改對應(yīng)的value值。

//formData.append("k1", "v1");

//formData.set("k1", "1");

//formData.getAll("k1"); ?? ?// ["1"]

//4、判斷是否有該數(shù)據(jù) ?--- 我們可以通過has(key)來判斷是否對應(yīng)的key值

//formData.append("k1", "v1");

//formData.append("k2",null);

//formData.has("k1"); // true

//formData.has("k2"); // true

//formData.has("k3"); // false

//5、刪除數(shù)據(jù) --- 通過delete(key)，來刪除數(shù)據(jù)

//formData.append("k1", "v1");

//formData.append("k1", "v2");

//formData.append("k1", "v1");

//formData.delete("k1");

//formData.getAll("k1"); // []

//6、遍歷 ---?可以通過entries()來獲取一個迭代器，然后遍歷所有的數(shù)據(jù)，

//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}

/*

* 可以看到返回迭代器的規(guī)則:

*每調(diào)用一次next()返回一條數(shù)據(jù)，數(shù)據(jù)的順序由添加的順序決定

*返回的是一個對象，當(dāng)其done屬性為true時，說明已經(jīng)遍歷完所有的數(shù)據(jù)，這個也可以作為判斷的依據(jù)

*返回的對象的value屬性以數(shù)組形式存儲了一對key/value，數(shù)組下標(biāo)0為key，下標(biāo)1為value，如果一個key值對應(yīng)多個value，會變成多對key/value返回

*

* 也可以通過values()方法只獲取value值

* */

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

總結(jié)

以上是生活随笔為你收集整理的html5 上传 原理,浅谈使用HTML5的FormData上传文件原理！！！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。