Un article expliquant comment implémenter le téléchargement et le téléchargement sans actualisation avec ajax (explication détaillée du code)

Dans l'article précédent "Vous apprendre à utiliser Windows pour monter une partition EFI (avec code)", je vous ai présenté comment utiliser Windows pour monter une partition EFI. L'article suivant vous aidera à comprendre comment Ajax implémente le téléchargement et le téléchargement sans actualisation. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

À propos du téléchargement et du téléchargement sans actualisation de ajaxajax无刷新上传和下载

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

关于上传

使用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

C'est une question qui a peu de contenu mais qui est beaucoup utilisée et qui doit être dite. En fait, je ne le fais vraiment pas. je veux le dire parce qu'il n'y a rien à dire.

À propos du téléchargement

Utilisez Flash, ActiveX pour télécharger, légèrement...

Écrivez votre propre XMLHttpRequest🎜rrreee

Utilisez Jquery

rrreee🎜 Ici, je parle de formData. Cette merde n'a été entièrement prise en charge qu'après que IE10 soit un produit à moitié cuit. Donc ce dont je veux parler, c'est de la troisième façon d'y parvenir en combinant form et iframe. Le principe est : 🎜🎜form caché et. iframe, la cible du form pointe vers iframe et écoute le chargement iframe pour obtenir le résultat du téléchargement. 🎜🎜Avantages : Compatible avec les foutus ie navigateurs de versions inférieures🎜🎜Inconvénients : Le téléchargement inter-domaines n'est pas pris en charge et un proxy inverse doit être personnalisé, car iframe onload le fait ne prend pas en charge le téléchargement inter-domaines Domaine 🎜🎜Interface de téléchargement API : Retour réussi : 🎜rrreee🎜Échec de retour : 🎜rrreee🎜HTML :
🎜rrreee

À propos du téléchargement :

🎜Soyez plus violent Téléchargez directement🎜rrreee🎜Avantages : petite quantité de code. 🎜🎜Inconvénients : les navigateurs modernes reconnaîtront automatiquement le type de fichier, tel que pdf, et l'ouvriront automatiquement dans le navigateur🎜🎜Téléchargement élégant :🎜rrreee🎜 Avantages :Résolu le défaut d'ouverture automatique des fichiers lors de téléchargements violents🎜🎜Inconvénients :Ne prend pas en charge le téléchargement post🎜🎜Utilisez XMLHttpRequest, méthode BLOB🎜rrreee🎜Avantages : Prend en charge la méthode post🎜🎜Inconvénients : Encore un foutu problème de compatibilité🎜🎜Donc, la meilleure façon de gérer compatibilité Ou form combiné avec iframe (indépendamment de la compatibilité, bien sûr XMLHttpRequest est la meilleure. Cette méthode est parfaitement prise en charge pour le téléchargement et le téléchargement). . Le téléchargement et le téléchargement sont courants. 🎜🎜La meilleure façon de charger et de télécharger : votre Boss n'a pas besoin d'être compatible avec les navigateurs ie de version basse🎜🎜[Fin]🎜🎜Apprentissage recommandé : 🎜AJAX tutoriel vidéo🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!