之前的文章《一招教你怎么使用window掛載EFI分區(qū)（附代碼）》中，給大家介紹了怎么使用window掛載EFI分區(qū)。下面本篇文章給大家了解ajax實(shí)現(xiàn)無刷新上傳和下載，有需要的朋友可以參考一下，希望對你們有所助。

關(guān)于ajax無刷新上傳和下載

這是一個沒什么含量但是又用的比較多又不得不說的問題，其實(shí)真的不想說，因?yàn)闆]什么好說的。

關(guān)于上傳

使用Flash, ActiveX上傳 ，略…

自己寫XMLHttpRequest

// 準(zhǔn)備FormData var formData = new FormData(); formData.append("key", value);  // 創(chuàng)建xhr對象 var xhr = new XMLHttpRequest(); // 監(jiān)聽狀態(tài)，實(shí)時(shí)響應(yīng) // xhr 和 xhr.upload 都有progress事件，xhr.progress是下載進(jìn)度，xhr.upload.progress是上傳進(jìn)度 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傳輸結(jié)束，不管成功失敗都會被觸發(fā) xhr.onloadend = function (event) {   console.log("load end"); }; // 發(fā)起ajax請求傳送數(shù)據(jù) 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吖的是個半殘品。所以這要說的是第三種結(jié)合form和iframe來實(shí)現(xiàn)，原理：

隱藏的form和iframe，form的target指向iframe，監(jiān)聽iframe load，來獲取上傳結(jié)果。

優(yōu)點(diǎn)：兼容該死的ie低版本瀏覽器

缺點(diǎn)：跨域上傳不支持，還需自定義反向代理，因?yàn)?code>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>

關(guān)于下載：

暴力一點(diǎn)的下載直接

window.open("/rest/donwload/abcd.do");

優(yōu)點(diǎn)：代碼量少。

缺點(diǎn)：現(xiàn)代瀏覽器會自動識別文件類型，如pdf，會自動在瀏覽器打開

優(yōu)雅一點(diǎn)的下載：

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)點(diǎn)：解決了暴力下載自動打開文件的缺陷

缺點(diǎn)：不支持post方式下載

使用XMLHttpRequest，BLOB方式

function download() {   var url = "download/?filename=aaa.txt";   var xhr = new XMLHttpRequest();   xhr.open("GET", url, true); // 也可以使用POST方式，根據(jù)接口   xhr.responseType = "blob"; // 返回類型blob   // 定義請求完成的處理函數(shù)，請求前也可以增加加載框/禁用下載按鈕邏輯   xhr.onload = function () {     // 請求完成     if (this.status === 200) {       // 返回200       var blob = this.response;       var reader = new FileReader();       reader.readAsDataURL(blob); // 轉(zhuǎn)換為base64，可以直接放入a表情href       reader.onload = function (e) {         // 轉(zhuǎn)換完成，創(chuàng)建一個a標(biāo)簽用于下載         var a = document.createElement("a");         a.download = "data.xlsx";         a.href = e.target.result;         $("body").append(a); // 修復(fù)firefox中無法觸發(fā)click         a.click();         $(a).remove();       };     }   };   // 發(fā)送ajax請求   xhr.send(); }

優(yōu)點(diǎn)：支持post方式

缺點(diǎn)：還是該死的兼容性問題

所以處理兼容性最好的方式 還是form結(jié)合iframe（不考慮兼容性當(dāng)然還是XMLHttpRequest最好），這種方式不論是上傳和下載 都是完美支持的。上傳下載通用。

最好的上傳下載方式： 你們的Boss不要求兼容ie低版本瀏覽器

[完]

推薦學(xué)習(xí)：AJAX視頻教程