ajax如何實(shí)現(xiàn)無刷新上傳和下載

這篇文章主要介紹了ajax如何實(shí)現(xiàn)無刷新上傳和下載，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

關(guān)于上傳

使用Flash, ActiveX上傳 ，略...

自己寫XMLHttpRequest

// 準(zhǔn)備FormData
var formData = new FormData();
formData.append("key", value);

// 創(chuàng)建xhr對(duì)象
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ā)生錯(cuò)誤事件
xhr.onerror = function (event) {
  console.log("error");
};
// ajax被取消
xhr.onabort = function (event) {
  console.log("abort");
};
// loadend傳輸結(jié)束，不管成功失敗都會(huì)被觸發(fā)
xhr.onloadend = function (event) {
  console.log("load end");
};
// 發(fā)起ajax請(qǐng)求傳送數(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，這個(gè)狗屎在IE10之后才開始完整的支持，IE9吖的是個(gè)半殘品。所以這要說的是第三種結(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)代瀏覽器會(huì)自動(dòng)識(shí)別文件類型，如pdf，會(huì)自動(dòng)在瀏覽器打開

優(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)：解決了暴力下載自動(dòng)打開文件的缺陷

缺點(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
  // 定義請(qǐng)求完成的處理函數(shù)，請(qǐng)求前也可以增加加載框/禁用下載按鈕邏輯
  xhr.onload = function () {
    // 請(qǐng)求完成
    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)建一個(gè)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請(qǐng)求
  xhr.send();
}

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

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

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“ajax如何實(shí)現(xiàn)無刷新上傳和下載”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!