jq實現前端檔案上傳
阿新 • • 發佈：2018-11-11
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"> <buttonid="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”。
請求時的引數：
請求後的結果：
