關(guān)于FormData
XMLHttpRequest Level 2添加了一個(gè)新的接口 ---- FormData
利用FormData對(duì)象，可以通過js用一些鍵值對(duì)來模擬一系列表單控件，可以使用XMLHttpRequest的 send( ) 方法來異步提交表單與普通的ajax相比，使用FormData的最大優(yōu)點(diǎn)就是可以異步上傳二進(jìn)制文件
FormData對(duì)象
FormData對(duì)象，可以把所有表單元素的name與value組成一個(gè)queryString,提交到后臺(tái)。 在使用ajax提交時(shí)，使用FormData對(duì)象可以減少拼接queryString的工作量
queryString是查詢字符串，http查詢字符串由url中？后面的值指定
當(dāng)頁面上的form以GET方式向頁面發(fā)送請(qǐng)求數(shù)據(jù)時(shí) (如數(shù)據(jù)含有不安全字符，則瀏覽器先將其轉(zhuǎn)換成16進(jìn)制的字符再傳送，如空格被轉(zhuǎn)換成%20時(shí) ) ,web server 將請(qǐng)求數(shù)據(jù)放入一名為QUERY_STRING的環(huán)境變量中。 Request.QueryString 方法是從這一環(huán)境變量中取出相應(yīng)的值，并將被轉(zhuǎn)成16進(jìn)制的字符還原
使用FormData上傳文件、圖片
創(chuàng)建一個(gè)FormData空對(duì)象，然后使用append方法添加key/value
var formdata=new FormData(); formdata.append ("name" , "張三");如果已經(jīng)有一個(gè)Form表單，取得form對(duì)象，作為參數(shù)傳入FormData對(duì)象
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title></title></head><body> <form name="form1" id="form1"> <input id="file" type="file" name="name"></input> </form> <script type="text/javascript"> var form=document.getElementById("form1"); var formdata=new FormData(form); </script></body></html> 可以在已有表單數(shù)據(jù)的基礎(chǔ)上，繼續(xù)添加新的鍵值對(duì)
var formdata=new FormData(); formdata.append ("age" , "21");使用FormData對(duì)象上傳文件
var formdata=new FormData($("#form1").[0]);//獲取文件法一//var formdata=new FormData( ); //formdata.append("file" , $("#file")[0].files[0]);//獲取文件法二 $.ajax({ type : 'post', url : '#', data : formdata, cache : false, processData : false, // 不處理發(fā)送的數(shù)據(jù)，因?yàn)閐ata值是Formdata對(duì)象，不需要對(duì)數(shù)據(jù)做處理 contentType : false, // 不設(shè)置Content-type請(qǐng)求頭 success : function(){} error : function(){ } })以上所述是小編給大家介紹的JS中使用FormData上傳文件、圖片的方法的全部敘述，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
