FormData 對象的使用

FormData 對象的使用

FormData對象用以將數據編譯成鍵值對，以便用XMLHttpRequest來發送數據。其主要用於發送表單數據，但亦可用於發送帶鍵數據(keyed data)，而獨立於表單使用。若是表單enctype屬性設爲multipart/form-data ，則會使用表單的submit()方法來發送數據，從而，發送數據具備一樣形式。

從零開始建立FormData對象節

你能夠本身建立一個FormData對象，而後調用它的append()方法來添加字段，像這樣：

var formData = new FormData(); formData.append("username", "Groucho"); formData.append("accountnum", 123456); //數字123456會被當即轉換成字符串 "123456" // HTML 文件類型input，由用戶選擇 formData.append("userfile", fileInputElement.files[0]); // JavaScript file-like 對象 var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文... var blob = new Blob([content], { type: "text/xml"}); formData.append("webmasterfile", blob); var request = new XMLHttpRequest(); request.open("POST", "http://foo.com/submitform.php"); request.send(formData);

注意：字段 "userfile" 和 "webmasterfile"  都包含一個文件. 字段 "accountnum" 是數字類型，它將被 FormData.append()方法轉換成字符串類型( FormData 對象的字段類型能夠是  Blob,  File, 或者 string:  若是它的字段類型不是Blob也不是File，則會被轉換成字符串類)。

上面的示例建立了一個FormData實例，包含"username", "accountnum", "userfile" 和 "webmasterfile"四個字段，而後使用XMLHttpRequest的send()方法發送表單數據。字段 "webmasterfile" 是 Blob類型。一個 Blob對象表示一個不可變的, 原始數據的相似文件對象。Blob表示的數據不必定是一個JavaScript原生格式。 File 接口基於Blob，繼承 blob功能並將其擴展爲支持用戶系統上的文件。你能夠經過 Blob() 構造函數建立一個Blob對象。

經過HTML表單建立FormData對象節

想要構造一個包含Form表單數據的FormData對象，須要在建立FormData對象時指定表單的元素。

var formData = new FormData(someFormElement);

示例：

var formElement = document.querySelector("form"); var request = new XMLHttpRequest(); request.open("POST", "submitform.php"); request.send(new FormData(formElement));

你還能夠在建立一個包含Form表單數據的FormData對象以後和發送請求以前，附加額外的數據到FormData對象裏，像這樣：

var formElement = document.querySelector("form"); var formData = new FormData(formElement); var request = new XMLHttpRequest(); request.open("POST", "submitform.php"); formData.append("serialnumber", serialNumber++); request.send(formData);

這樣你就能夠在發送請求以前自由地附加不必定是用戶編輯的字段到表單數據裏

使用FormData對象上傳文件節

你還能夠使用FormData上傳文件。使用的時候須要在表單中添加一個文件類型的input：

<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 /> <input type="submit" value="Stash the file!" /> </form> <div></div>

而後使用下面的代碼發送請求：

var form = document.forms.namedItem("fileinfo"); form.addEventListener('submit', function(ev) { var oOutput = document.querySelector("div"), oData = new FormData(form); 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(); }, false);

注意：若是FormData對象是經過表單建立的，則表單中指定的請求方式會被應用到方法open()中 。

你還能夠直接向FormData對象附加File或Blob類型的文件，以下所示：

data.append("myfile", myBlob, "filename.txt");

使用append()方法時，能夠經過第三個可選參數設置發送請求的頭 Content-Disposition 指定文件名。若是不指定文件名（或者不支持該參數時），將使用名字「blob」。

若是你設置正確的配置項，你也能夠經過jQuery來使用FormData對象：

var fd = new FormData(document.querySelector("form")); fd.append("CustomField", "This is some extra data"); $.ajax({ url: "stash.php", type: "POST", data: fd, processData: false, // 不處理數據 contentType: false // 不設置內容類型 });