快捷導(dǎo)航

JS中使用FormData上傳文件、圖片的方法

更新時(shí)間：2016年08月07日 13:01:28 作者：謨風(fēng)

這篇文章主要介紹了JS中使用FormData上傳文件、圖片的方法的相關(guān)資料,需要的朋友可以參考下

關(guān)于FormData

XMLHttpRequest Level 2添加了一個(gè)新的接口 ---- FormData

利用FormData對象，可以通過js用一些鍵值對來模擬一系列表單控件，可以使用XMLHttpRequest的 send( ) 方法來異步提交表單與普通的ajax相比，使用FormData的最大優(yōu)點(diǎn)就是可以異步上傳二進(jìn)制文件

FormData對象

FormData對象，可以把所有表單元素的name與value組成一個(gè)queryString,提交到后臺。在使用ajax提交時(shí)，使用FormData對象可以減少拼接queryString的工作量

queryString是查詢字符串，http查詢字符串由url中？后面的值指定

當(dāng)頁面上的form以GET方式向頁面發(fā)送請求數(shù)據(jù)時(shí) (如數(shù)據(jù)含有不安全字符，則瀏覽器先將其轉(zhuǎn)換成16進(jìn)制的字符再傳送，如空格被轉(zhuǎn)換成%20時(shí) ) ,web server 將請求數(shù)據(jù)放入一名為QUERY_STRING的環(huán)境變量中。 Request.QueryString 方法是從這一環(huán)境變量中取出相應(yīng)的值，并將被轉(zhuǎn)成16進(jìn)制的字符還原
使用FormData上傳文件、圖片

創(chuàng)建一個(gè)FormData空對象，然后使用append方法添加key/value

var formdata=new FormData();
 formdata.append ("name" , "張三");

如果已經(jīng)有一個(gè)Form表單，取得form對象，作為參數(shù)傳入FormData對象

<!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ù)添加新的鍵值對

var formdata=new FormData();
 formdata.append ("age" , "21");

使用FormData對象上傳文件

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對象，不需要對數(shù)據(jù)做處理
           contentType : false, // 不設(shè)置Content-type請求頭
           success : function(){}
           error : function(){ }
       })

以上所述是小編給大家介紹的JS中使用FormData上傳文件、圖片的方法的全部敘述，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言！

您可能感興趣的文章: