jq实现前端文件上传
生活随笔
收集整理的這篇文章主要介紹了
jq实现前端文件上传
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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”。
?
請求時的參數：
?
請求后的結果：
?
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的jq实现前端文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 浅析inline-block--使用in
- 下一篇： 实现用户操作指引功能