Ein Artikel, in dem erläutert wird, wie ein aktualisierungsfreier Upload und Download mit Ajax implementiert wird (detaillierte Code-Erklärung)

Im vorherigen Artikel „Lernen Sie, wie Sie Windows zum Mounten einer EFI-Partition verwenden (mit Code)“ habe ich Ihnen vorgestellt, wie Sie Windows zum Mounten einer EFI-Partition verwenden. Der folgende Artikel hilft Ihnen zu verstehen, wie Sie mit Ajax aktualisierungsfreie Uploads und Downloads durchführen können. Ich hoffe, dass er Ihnen weiterhilft.

Über ajax nicht aktualisierendes Hochladen und Herunterladenajax无刷新上传和下载

这是一个没什么含量但是又用的比较多又不得不说的问题，其实真的不想说，因为没什么好说的。

关于上传

使用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吖的是个半残品。所以这要说的是第三种结合form和iframe来实现，原理：

隐藏的form和iframe，form的target指向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方式

function download() {
  var url = "download/?filename=aaa.txt";
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true); // 也可以使用POST方式，根据接口
  xhr.responseType = "blob"; // 返回类型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("a");
        a.download = "data.xlsx";
        a.href = e.target.result;
        $("body").append(a); // 修复firefox中无法触发click
        a.click();
        $(a).remove();
      };
    }
  };
  // 发送ajax请求
  xhr.send();
}

优点：支持post方式

缺点：还是该死的兼容性问题

所以处理兼容性最好的方式 还是form结合iframe（不考虑兼容性当然还是XMLHttpRequest最好），这种方式不论是上传和下载 都是完美支持的。上传下载通用。

最好的上传下载方式： 你们的Boss不要求兼容ie

Dies ist eine Frage, die wenig Inhalt hat, aber häufig verwendet wird und die ich eigentlich nicht sagen muss Ich möchte es sagen, weil es nichts zu sagen gibt.

Über das Hochladen

Verwenden Sie Flash, ActiveX zum Hochladen, etwas...

Schreiben Sie Ihre eigene XMLHttpRequest🎜rrreee

Verwenden Sie Jquery

rrreee🎜 Hier spreche ich von formData. Dieses Stück Scheiße wurde erst vollständig unterstützt, nachdem IE9 ein unausgegorenes Produkt ist. Worüber ich also sprechen möchte, ist der dritte Weg, dies durch die Kombination von form und iframe zu erreichen. Das Prinzip ist: 🎜🎜Verstecktes form und iframe, das target von form zeigt auf iframe und lauscht dem iframe-Laden um das Upload-Ergebnis zu erhalten. 🎜🎜Vorteile: Kompatibel mit verdammten ie-Browsern niedrigerer Versionen🎜🎜Nachteile: Cross-Domain-Upload wird nicht unterstützt und ein Reverse-Proxy muss angepasst werden, weil iframe onload dies tut Unterstützt kein domänenübergreifendes Hochladen. Domain 🎜🎜Upload-Schnittstelle API: Erfolgreiche Rückgabe: 🎜rrreee🎜Fehlerhafte Rückgabe: 🎜rrreee🎜HTML:
🎜rrreee

Über das Herunterladen:

🎜Seien Sie gewalttätiger. Laden Sie es direkt herunter🎜rrreee🎜Vorteile: weniger Code. 🎜🎜Nachteile: Moderne Browser erkennen automatisch den Dateityp, z. B. pdf, und öffnen ihn automatisch im Browser🎜🎜Eleganter Download:🎜rrreee🎜 Vorteile:Der Fehler beim automatischen Öffnen von Dateien bei gewalttätigen Downloads wurde behoben🎜🎜Nachteile:Unterstützt das Herunterladen von post nicht🎜🎜Verwenden Sie XMLHttpRequest, BLOB-Methode🎜rrreee🎜Vorteile: Unterstützt die post-Methode🎜🎜Nachteile: Immer noch ein verdammtes Kompatibilitätsproblem🎜🎜Also der beste Weg, damit umzugehen Kompatibilität Oder form kombiniert mit iframe (unabhängig von der Kompatibilität ist XMLHttpRequest natürlich die beste Methode, die sowohl beim Hochladen als auch beim Herunterladen perfekt unterstützt wird). . . Upload und Download sind üblich. 🎜🎜Der beste Weg zum Hoch- und Herunterladen: Ihr Boss muss nicht mit dh-Browsern niedriger Versionen kompatibel sein🎜🎜[Ende]🎜🎜Empfohlenes Lernen: 🎜AJAX Video-Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonEin Artikel, in dem erläutert wird, wie ein aktualisierungsfreier Upload und Download mit Ajax implementiert wird (detaillierte Code-Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!