ajax経由でリフレッシュフリーアップロード・ダウンロードを実装する方法を解説した記事（詳細なコード説明）

前回の記事「windowを使ってEFIパーティションをマウントする方法を教えます(コード付き)」では、windowを使ってEFIパーティションをマウントする方法を紹介しました。 Ajax を使用して更新なしのアップロードとダウンロードを実装する方法については、次の記事を参照してください。必要な友人は参照してください。

Aboutajax更新アップロードとダウンロードはありません

これは、コンテンツは少ないですが、頻繁に使用されるコンテンツです話さないという点については、あまり話すことがないのであまり話したくないのですが。

アップロードについて

使用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 を組み合わせてこれを実現する 3 番目の方法です。原理は次のとおりです:

hidden form form の iframe 、target は iframe を指し、iframeload をリッスンしてアップロード結果を取得します。

利点: ie下位バージョンのブラウザと互換性がある

欠点: クロスドメイン アップロードはサポートされておらず、iframe オンロードのためカスタム リバース プロキシが必要です クロスドメインはサポートされていません

アップロード インターフェイス 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();
}

利点: サポート postmethod

欠点: 未だに互換性の問題が残っています

したがって、互換性に対処する最善の方法は、

form と iframe を組み合わせることです (もちろん、どちらにしても XMLHttpRequest です) Best)、この方法はアップロードとダウンロードの両方で完全にサポートされています。アップロードとダウンロードは共通です。

アップロードとダウンロードの最良の方法:

上司は、ie下位バージョンのブラウザ

と互換性を持つ必要はありません[終了]

推奨される学習:

AJAX ビデオ チュートリアル

以上がajax経由でリフレッシュフリーアップロード・ダウンロードを実装する方法を解説した記事（詳細なコード説明）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。