站長資訊網
之前的文章《一招教你怎么使用window掛載EFI分區(qū)（附代碼）》中，給大家介紹了怎么使用window掛載EFI分區(qū)。下面本篇文章給大家了解ajax實現(xiàn)無刷新上傳和下載，有需要的朋友可以參考一下，希望對你們有所助。
關于ajax無刷新上傳和下載
這是一個沒什么含量但是又用的比較多又不得不說的問題，其實真的不想說，因為沒什么好說的。
關于上傳
使用Flash, ActiveX上傳 ，略…
自己寫XMLHttpRequest
// 準備FormData var formData = new FormData(); formData.append("key", value); // 創(chuàng)建xhr對象 var xhr = new XMLHttpRequest(); // 監(jiān)聽狀態(tài)，實時響應 // xhr 和 xhr.upload 都有progress事件，xhr.progress是下載進度，xhr.upload.progress是上傳進度 xhr.upload.onprogress = function (event) { if (event.lengthComputable) { var percent = Math.round(event.loaded / event.total); console.log("%d%", percent); } }; // 傳輸開始事件 xhr.onloadstart = function (event) { console.log("load start"); }; // ajax過程成功完成事件 xhr.onload = function (event) { console.log("load success"); console.log(xhr.responseText); var ret = JSON.parse(xhr.responseText); console.log(ret); }; // ajax過程發(fā)生錯誤事件 xhr.onerror = function (event) { console.log("error"); }; // ajax被取消 xhr.onabort = function (event) { console.log("abort"); }; // loadend傳輸結束，不管成功失敗都會被觸發(fā) xhr.onloadend = function (event) { console.log("load end"); }; // 發(fā)起ajax請求傳送數(shù)據 xhr.open("POST", "/upload", true); xhr.send(formData);
使用Jquery
var formData = new FormData(); formData.append("key", value); //傳的參和值 $.ajax({ url: "XXX", type: "POST", data: formData, contentType: false, processData: false, success: function (res) {}, error: function () {}, });
這里要說的就是formData，這個狗屎在IE10之后才開始完整的支持，IE9吖的是個半殘品。所以這要說的是第三種結合form和iframe來實現(xiàn)，原理：
隱藏的form和iframe，form的target指向iframe，監(jiān)聽iframe load，來獲取上傳結果。
優(yōu)點：兼容該死的ie低版本瀏覽器
缺點：跨域上傳不支持，還需自定義反向代理，因為iframe onload不支持跨域
上傳接口API： 成功返回：
{ code: 1, msg: '上傳成功' }
失敗返回：
{ code: 0, msg: '上傳失敗' }
HTML：
<form action="xxxx" target="upload" enctype="multipart/form-data" method="post" style="display:none; " > ... .. </form> <iframe name="upload" id="upload"></iframe> <!-- JS: --> <script> var fm = document.getElementById("upload"); var load = function () { var doc = fm.contentWindow || fm.contentDocument; if (doc.document) doc = doc.document; var content = doc.body.textContent; //此處的值取決與API 接口返回的值 var data = JSON.parse(content); console.log(content); }; // 兼容低版本瀏覽器監(jiān)聽判斷 fm.attachEvent ? fm.attachEvent("onload", load) : (fm.onload = load); </script>
關于下載：
暴力一點的下載直接
window.open("/rest/donwload/abcd.do");
優(yōu)點：代碼量少。
缺點：現(xiàn)代瀏覽器會自動識別文件類型，如pdf，會自動在瀏覽器打開
優(yōu)雅一點的下載：
function download() { var a = document.createElement("a"); var url = "download/?filename=aaa.txt"; var filename = "data.xlsx"; a.href = url; a.download = filename; a.click(); }
優(yōu)點：解決了暴力下載自動打開文件的缺陷
缺點：不支持post方式下載
使用XMLHttpRequest，BLOB方式
function download() { var url = "download/?filename=aaa.txt"; var xhr = new XMLHttpRequest(); xhr.open("GET", url, true); // 也可以使用POST方式，根據接口 xhr.responseType = "blob"; // 返回類型blob // 定義請求完成的處理函數(shù)，請求前也可以增加加載框/禁用下載按鈕邏輯 xhr.onload = function () { // 請求完成 if (this.status === 200) { // 返回200 var blob = this.response; var reader = new FileReader(); reader.readAsDataURL(blob); // 轉換為base64，可以直接放入a表情href reader.onload = function (e) { // 轉換完成，創(chuàng)建一個a標簽用于下載 var a = document.createElement("a"); a.download = "data.xlsx"; a.href = e.target.result; $("body").append(a); // 修復firefox中無法觸發(fā)click a.click(); $(a).remove(); }; } }; // 發(fā)送ajax請求 xhr.send(); }
優(yōu)點：支持post方式
缺點：還是該死的兼容性問題
所以處理兼容性最好的方式 還是form結合iframe（不考慮兼容性當然還是XMLHttpRequest最好），這種方式不論是上傳和下載 都是完美支持的。上傳下載通用。
最好的上傳下載方式： 你們的Boss不要求兼容ie低版本瀏覽器
[完]
推薦學習：AJAX視頻教程
