使用FormData上傳文件、圖片

時間 2019-11-19

標籤使用 formdata 上傳文件圖片简体版

原文原文鏈接

關於FormDatajavascript

XMLHttpRequest Level 2添加了一個新的接口 ---- FormData
利用FormData對象，能夠經過js用一些鍵值對來模擬一系列表單控件，能夠使用XMLHttpRequest的 send( ) 方法來異步提交表單
與普通的ajax相比，使用FormData的最大優勢就是能夠異步上傳二進制文件

FormData對象html

- FormData對象，能夠把全部表單元素的name與value組成一個queryString,提交到後臺。在使用ajax提交時，使用FormData對象能夠減小拼接queryString的工做量
- queryString是查詢字符串，http查詢字符串由url中？後面的值指定
- 當頁面上的form以GET方式向頁面發送請求數據時 (如數據含有不安全字符，則瀏覽器先將其轉換成16進制的字符再傳送，如空格被轉換成%20時 ) ,web server 將請求數據放入一名爲QUERY_STRING的環境變量中。 Request.QueryString 方法是從這一環境變量中取出相應的值，並將被轉成16進制的字符還原

使用FormData上傳文件、圖片java

建立一個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(){ }
              })

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。