首頁  >  文章  >  web前端  >  一文講解ajax實現無刷新上傳和下載(程式碼詳解)

一文講解ajax實現無刷新上傳和下載(程式碼詳解)

奋力向前
奋力向前轉載
2021-08-31 10:04:242238瀏覽

之前的文章《一招教你怎麼使用window掛載EFI分割區(附程式碼)》中,跟大家介紹了怎麼使用window掛載EFI分割區。以下這篇文章給大家了解ajax實現無刷新上傳和下載,有需要的朋友可以參考一下,希望對你們有所助。

一文講解ajax實現無刷新上傳和下載(程式碼詳解)

關於ajax無刷新上傳和下載

這是一個沒什麼含量但是又用的比較多又不得不說的問題,其實真的不想說,因為沒什麼好說的。

關於上傳

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

自己寫XMLHttpRequest

// 准备FormData
var formData = new FormData();
formData.append("key", value);

// 创建xhr对象
var xhr = new XMLHttpRequest();
// 监听状态,实时响应
// 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过程发生错误事件
xhr.onerror = function (event) {
  console.log("error");
};
// ajax被取消
xhr.onabort = function (event) {
  console.log("abort");
};
// loadend传输结束,不管成功失败都会被触发
xhr.onloadend = function (event) {
  console.log("load end");
};
// 发起ajax请求传送数据
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吖的是個半殘品。所以這要說的是第三種結合formiframe來實現,原理:

隱藏的formiframe formtarget指向iframe,監聽iframe load,來取得上傳結果。

優點:相容於該死的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);
  };
  // 兼容低版本浏览器监听判断
  fm.attachEvent ? fm.attachEvent("onload", load) : (fm.onload = load);
</script>

關於下載:暴力一點的下載直接

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

優點:程式碼量少。 缺點:現代瀏覽器會自動辨識文件類型,如

pdf

,會自動在瀏覽器開啟優雅一點的下載:

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();
}

優點:解決了暴力下載自動開啟檔案的缺陷

#缺點:不支援post方式下載

使用XMLHttpRequest,BLOB方式

<pre class="brush:php;toolbar:false">function download() { var url = &quot;download/?filename=aaa.txt&quot;; var xhr = new XMLHttpRequest(); xhr.open(&quot;GET&quot;, url, true); // 也可以使用POST方式,根据接口 xhr.responseType = &quot;blob&quot;; // 返回类型blob // 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑 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) { // 转换完成,创建一个a标签用于下载 var a = document.createElement(&quot;a&quot;); a.download = &quot;data.xlsx&quot;; a.href = e.target.result; $(&quot;body&quot;).append(a); // 修复firefox中无法触发click a.click(); $(a).remove(); }; } }; // 发送ajax请求 xhr.send(); }</pre>優點:支援

post

方式

缺點:還是該死的相容性問題

###所以處理相容性最好的方式還是###form###結合###iframe###(不考慮相容性當然還是###XMLHttpRequest ###最好),這種方式不論是上傳和下載都是完美支援的。上傳下載通用。 ######最好的上傳下載方式: 你們的###Boss###不要求相容###ie### 低版瀏覽器######[完]##### #推薦學習:###AJAX影片教學######

以上是一文講解ajax實現無刷新上傳和下載(程式碼詳解)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:chuchur.com。如有侵權,請聯絡admin@php.cn刪除