Web前沿—HTML5 Form Data 對象的使用

xmlhttprequest level 2 添加了一個新的接口——formdata。利用 formdata 對象，我們可以通過 javascript 用一些鍵值對來模拟一系清單單控件，我們還可以使用 xmlhttprequest 的 send() 方法來異步的送出表單。與普通的 ajax 相比，使用 formdata 的最大優點就是我們可以異步上傳二進制檔案。

　　建立一個formdata對象

　　你可以先建立一個空的 formdata 對象,然後使用 append() 方法向該對象裡添加字段，如下：

var omyform = new formdata();

omyform.append("username", "groucho");

omyform.append("accountnum", 123456); // 數字123456被立即轉換成字元串"123456"

// fileinputelement中已經包含了使用者所選擇的檔案

omyform.append("userfile", fileinputelement.files[0]);

var ofilebody = "<a id="a"><b id="b">hey!</b></a>"; // blob對象包含的檔案内容

var oblob = new blob([ofilebody], { type: "text/xml"});

omyform.append("webmasterfile", oblob);

var oreq = new xmlhttprequest();

oreq.open("post", "http://foo.com/submitform.php");

oreq.send(omyform);

　　注：字段 "userfile" 和 "webmasterfile" 的值都包含了一個檔案。通過 formdata.append() 方法賦給字段 "accountnum" 的數字被自動轉換為字元（字段的值可以是一個 blob 對象，file對象或者字元串，剩下其他類型的值都會被自動轉換成字元串）。

　　在該例子中，我們建立了一個名為 omyform 的 formdata 對象，該對象中包含了名為"username"，"accountnum"，"userfile" 以及 "webmasterfile" 的字段名，然後使用xmlhttprequest的 send() 方法把這些資料發送了出去。"webmasterfile" 字段的值不是一個字元串,還是一個 blob 對象。

　　使用html表單來初始化一個formdata對象

　　可以用一個已有的 form 元素來初始化 formdata 對象，隻需要把這個 form 元素作為參數傳入 formdata 構造函數即可：

　　var newformdata = new formdata(someformelement);

　　例如：

　　var formelement = document.getelementbyid("myformelement");

　　var oreq = new xmlhttprequest();

　　oreq.open("post", "submitform.php");

　　oreq.send(new formdata(formelement));

　　你還可以在已有表單資料的基礎上，繼續添加新的鍵值對，如下：

　　formdata = new formdata(formelement);

　　formdata.append("serialnumber", serialnumber++);

　　oreq.send(formdata);

　　你可以通過這種方式添加一些不想讓使用者編輯的固定字段,然後再發送.　使用formdata對象發送檔案

　　你還可以使用 formdata 來發送二進制檔案.首先在 html 中要有一個包含了檔案輸入框的 form 元素：

<form enctype="multipart/form-data" method="post" name="fileinfo">

<label>your email address:</label>

<input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />

<label>custom file label:</label>

<input type="text" name="filelabel" size="12" maxlength="32" /><br />

<label>file to stash:</label>

<input type="file" name="file" required />

</form>

<div id="output"></div>

<a href="javascript:sendform()">stash the file!</a>

　　然後你就可以使用下面的代碼來異步的上傳使用者所選擇的檔案：

function sendform() {

var ooutput = document.getelementbyid("output");

var odata = new formdata(document.forms.nameditem("fileinfo"));

odata.append("customfield", "this is some extra data");

oreq.open("post", "stash.php", true);

oreq.onload = function(oevent) {

if (oreq.status == 200) {

ooutput.innerhtml = "uploaded!";

} else {

ooutput.innerhtml = "error " + oreq.status + " occurred uploading your file.<br \/>";

}

};

oreq.send(odata);

　　你還可以不借助 html 表單，直接向 formdata 對象中添加一個 file 對象或者一個 blob 對象：

　　data.append("myfile", myblob);

　　如果 formdata 對象中的某個字段值是一個 blob 對象，則在發送 http 請求時，代表該 blob 對象所包含檔案的檔案名的 "content-disposition" 請求頭的值在不同的浏覽器下有所不同，firefox使用了固定的字元串"blob"，而 chrome 使用了一個随機字元串。

　　你還可以使用 jquery 來發送 formdata，但必須要正确的設定相關選項：

var fd = new formdata(document.getelementbyid("fileinfo"));

fd.append("customfield", "this is some extra data");

$.ajax({

url: "stash.php",

type: "post",

data: fd,

processdata: false,  // 告訴jquery不要去處理發送的資料

contenttype: false   // 告訴jquery不要去設定content-type請求頭

});

　　浏覽器相容性

最新内容請見作者的github頁：http://qaseven.github.io/