關於FormData
XMLHttpRequest Level 2添加了一個新的接口 ---- FormData
利用FormData對象，可以通過js用一些鍵值對來模擬一系列表單控件，可以使用XMLHttpRequest的 send( ) 方法來異步提交表單與普通的ajax相比，使用FormData的最大優點就是可以異步上傳二進制文件
FormData對象
FormData對象，可以把所有表單元素的name與value組成一個queryString,提交到後台。 在使用ajax提交時，使用FormData對象可以減少拼接queryString的工作量
queryString是查詢字符串，http查詢字符串由url中？後面的值指定
當頁面上的form以GET方式向頁面發送請求數據時 (如數據含有不安全字符，則浏覽器先將其轉換成16進制的字符再傳送，如空格被轉換成%20時 ) ,web server 將請求數據放入一名為QUERY_STRING的環境變量中。 Request.QueryString 方法是從這一環境變量中取出相應的值，並將被轉成16進制的字符還原
使用FormData上傳文件、圖片
創建一個FormData空對象，然後使用append方法添加key/value
var formdata=new FormData();
formdata.append ("name" , "張三");
如果已經有一個Form表單，取得form對象，作為參數傳入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>
可以在已有表單數據的基礎上，繼續添加新的鍵值對
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, // 不處理發送的數據，因為data值是Formdata對象，不需要對數據做處理
contentType : false, // 不設置Content-type請求頭
success : function(){}
error : function(){ }
})
以上所述是小編給大家介紹的JS中使用FormData上傳文件、圖片的方法的全部敘述，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言！