var formData = new FormData();formData.append( username , Groucho formData.append( accountnum , 123456); // number 123456 is immediately converted to a string 123456 // HTML file input, chosen by userformData.append( userfile , fileInputElement.files[0]);// JavaScript file-like objectvar content = a id= a b id= b hey! /b /a // the body of the new file...var blob = new Blob([content], { type: text/xml });formData.append( webmasterfile , blob);var request = new XMLHttpRequest();request.open( POST , http://foo.com/submitform.php 

注意：字段”userfile” 和 “webmasterfile” 都包含文件（file）。被分配到字段”accountnum”上的數(shù)字直接被FormData.append()方法轉(zhuǎn)換成了字符串（字段的值（html' target='_blank'>value）可能是一個(gè)Blob, File, 或一個(gè)string：如果值既不是Blob也不是File，則值會被轉(zhuǎn)換成一個(gè)string）。

這個(gè)例子創(chuàng)建了一個(gè)FormData實(shí)例，其中包含字段”username”, “accountnum”, “userfile” 和 “webmasterfile”，然后使用XMLHttpRequest對象的send()方法去發(fā)送表單數(shù)據(jù)。字段”webmasterfile”是一個(gè)Blob。一個(gè)Blob對象代表一個(gè)文件對象的原始數(shù)據(jù)。但是Blob代表的數(shù)據(jù)不必須是javascript原生格式的數(shù)據(jù)。文件接口是基于Blob,繼承Blob功能和擴(kuò)大它對用戶文件系統(tǒng)的支持。為了構(gòu)建一個(gè)Blob可以調(diào)用Blob()構(gòu)造函數(shù)。

從一個(gè)HTML表單獲得一個(gè)FormData對象

為了獲得一個(gè)包含已存在表單數(shù)據(jù)的FormData對象，在創(chuàng)建FormData對象的時(shí)候需要指定表單元素。

var formData = new FormData(someFormElement);

就像下面這樣：

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

你也可以在獲得FormData對象之后增加另外的數(shù)據(jù)，就像下面這樣：

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);

這樣你可以在發(fā)送之前增加額外的信息，不一定是用戶編輯的。

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

你可以使用FormData發(fā)送文件。簡單的 form 中在包含一個(gè) 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 

然后你可以使用下面的代碼去發(fā)送：

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對象中添加File或Blob，就像下面這樣：

data.append( myfile , myBlob, filename.txt

當(dāng)使用append() 方法的時(shí)候，可能會使用到第三個(gè)參數(shù)去發(fā)送文件名稱（通過Content-Disposition頭發(fā)送到服務(wù)器）。如果沒有指定第三個(gè)參數(shù)或這個(gè)參數(shù)不被支持的話，第三個(gè)參數(shù)默認(rèn)是”blob”。

如果你設(shè)置好正確的options，你也可以和jQuery配合起來使用：

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, // tell jQuery not to process the data contentType: false // tell jQuery not to set contentType});

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php 其它相關(guān)文章！

相關(guān)閱讀：

用Js操作HTTP的Cookie的實(shí)現(xiàn)步驟

Js操作BOM對象模型的詳細(xì)介紹

在HTML的網(wǎng)頁布局里div與span有什么區(qū)別

以上就是HTML里FormData對象的詳細(xì)介紹的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。