FormData
FormData是XMLHttpRequest Level 2 新增的一個接口。
使用FormData可以實現各種文件上傳。
使用
// 創建FormData的實例 var formdata = new FormData(); // 用append()為實例添加鍵和值 formdata.append(鍵名, 鍵值);
注意
使用jq的$.ajax()方法來進行文件上傳時，需要設置contentType和processData兩個參數。
| 參數 | 類型 | 說明 |
| contentType | String | 當發送信息至服務器時，內容編碼類型默認為“application/x-www-form-urlencoded”。 該默認值適合大多數應用場合。 |
| processData | Boolean | 默認為true。 默認情況下，發送的數據將被轉換為對象（從技術角度來講並非字符串）以配合默認內容類型“application/x-www-form-urlencoded”。 如果要發送DOM樹信息或者其他不希望轉換的信息，請設置為false。 |
從上面兩個參數的說明可以看出，ajax發送數據的時候內容編碼類型是“application/x-www-form-urlencoded”，
而我們上傳的文件可能是其他類型，所以上傳的時候不設置內容類型，故 contentType: false，
不對數據做處理，故 processData: false 。
實例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jq實現前端文件上傳</title> </head> <body> <input id="file" type="file"> <button id="btn">上傳</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $('#btn').click(function() { var formdata = new FormData(); formdata.append("file", $('#file')[0].files[0]); $.ajax({ type: "POST", url: "你要將文件上傳到的地址", data: formdata, contentType: false, // 不設置內容類型 processData: false, // 不處理數據 dataType: "json", success: function(data) { // 請求成功后要執行的代碼 }, error: function(data) { // 請求失敗后要執行的代碼 } }); }); </script> </body> </html>
觀察
console.log($('#file')[0]);
console.log($('#file')[0].files[0]);
從上面的打印結果可以看到我們傳的文件類型是“application/octet-stream”。
請求時的參數：
請求后的結果：
