關於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(){ } })