Artikel yang menerangkan cara melaksanakan muat naik dan muat turun tanpa muat semula dengan ajax (penjelasan kod terperinci)

Dalam artikel sebelumnya "Ajar anda cara menggunakan tetingkap untuk melekapkan partition EFI (dengan kod) ", saya memperkenalkan anda cara menggunakan tetingkap untuk melekapkan partition EFI. Artikel berikut akan membantu anda memahami cara melaksanakan muat naik dan muat turun tanpa muat semula dengan Ajax Rakan yang memerlukan saya harap ia akan membantu anda.

Mengenai ajaxMemuat naik dan memuat turun tanpa menyegarkan

Ini ialah soalan yang mengandungi sedikit kandungan tetapi digunakan banyak dan mesti berkata. , Sebenarnya saya tidak mahu mengatakannya, kerana tidak banyak yang perlu diperkatakan.

Mengenai memuat naik

Gunakan Flash, ActiveX untuk memuat naik, sedikit...

Tulis sendiriXMLHttpRequest

// 准备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);

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

Apa yang ingin saya katakan di sini ialah formData, sekeping najis ini hanya mula disokong sepenuhnya selepas IE10, IE9 adalah produk separuh sisa. Jadi apa yang saya ingin bincangkan ialah cara ketiga untuk mencapainya dengan menggabungkan form dan iframe Prinsipnya ialah:

menyembunyikan form dan iframe, dan form daripada <. 🎜> mata ke target Pantau iframe untuk mendapatkan hasil muat naik. iframe load

Kelebihan: Serasi dengan

pelayar versi rendahie

Kelemahan: Muat naik merentas domain tidak disokong dan proksi terbalik perlu disesuaikan kerana

tidak menyokong silang- domainiframe onload

Muat naik antara muka

: Pemulangan yang berjaya: API

{
  code: 1,
  msg: '上传成功'
}

Kegagalan pemulangan:

{
  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>

Mengenai muat turun :

Muat turun yang lebih ganas terus

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

Kelebihan: kurang kod.

Kelemahan: Penyemak imbas moden akan mengecam jenis fail secara automatik, seperti

, dan secara automatik akan membuka pdf

dalam penyemak imbas untuk muat turun yang lebih elegan:

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

Kelebihan: Menyelesaikan kecacatan membuka fail secara automatik dalam muat turun ganas

Kelemahan: Tidak menyokong muat turunpost

Gunakan XMLHttpRequest, kaedah 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();
}

Kelebihan: Sokongan kaedahpost

Keburukan: Keserasian sialan Masalah

Jadi cara terbaik untuk menangani keserasian ialah menggabungkan

dengan form (sudah tentu iframe adalah yang terbaik tanpa mengira keserasian Kaedah ini disokong dengan sempurna untuk memuat naik dan memuat turun). . Muat naik dan muat turun adalah perkara biasa. XMLHttpRequest

Cara terbaik untuk memuat naik dan memuat turun:

anda tidak perlu serasi dengan Bosspelayar versi rendahie

[Tamat]

Pembelajaran yang disyorkan:

Tutorial Video AJAX

Atas ialah kandungan terperinci Artikel yang menerangkan cara melaksanakan muat naik dan muat turun tanpa muat semula dengan ajax (penjelasan kod terperinci). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!