jq实现前端文件上传
FormData
FormData是XMLHttpRequest Level 2 新增的一個接口。
使用FormData可以實現(xiàn)各種文件上傳。
?
使用
// 創(chuàng)建FormData的實例 var formdata = new FormData();// 用append()為實例添加鍵和值 formdata.append(鍵名, 鍵值);?
注意
使用jq的$.ajax()方法來進行文件上傳時，需要設(shè)置contentType和processData兩個參數(shù)。
| 參數(shù) | 類型 | 說明 |
| contentType | String | 當(dāng)發(fā)送信息至服務(wù)器時，內(nèi)容編碼類型默認(rèn)為“application/x-www-form-urlencoded”。 該默認(rèn)值適合大多數(shù)應(yīng)用場合。 |
| processData | Boolean | 默認(rèn)為true。 默認(rèn)情況下，發(fā)送的數(shù)據(jù)將被轉(zhuǎn)換為對象（從技術(shù)角度來講并非字符串）以配合默認(rèn)內(nèi)容類型“application/x-www-form-urlencoded”。 如果要發(fā)送DOM樹信息或者其他不希望轉(zhuǎn)換的信息，請設(shè)置為false。 |
從上面兩個參數(shù)的說明可以看出，ajax發(fā)送數(shù)據(jù)的時候內(nèi)容編碼類型是“application/x-www-form-urlencoded”，
而我們上傳的文件可能是其他類型，所以上傳的時候不設(shè)置內(nèi)容類型，故 contentType: false，
不對數(shù)據(jù)做處理，故 processData: false 。
?
實例
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>jq實現(xiàn)前端文件上傳</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, // 不設(shè)置內(nèi)容類型 processData: false, // 不處理數(shù)據(jù) dataType: "json",success: function(data) {// 請求成功后要執(zhí)行的代碼 },error: function(data) {// 請求失敗后要執(zhí)行的代碼 }});});</script> </body> </html>?
觀察
console.log($('#file')[0]); console.log($('#file')[0].files[0]);從上面的打印結(jié)果可以看到我們傳的文件類型是“application/octet-stream”。
?
請求時的參數(shù)：
?
請求后的結(jié)果：
?
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的jq实现前端文件上传的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 浅析inline-block--使用in
- 下一篇： 前端工程师和设计师必读文章推荐【系列三十