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

// 準(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);

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);
  };
  // 兼容低版本瀏覽器監(jiān)聽判斷
  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方式，根據(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();
}

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!