An article explaining how to implement refresh-free upload and download via ajax (detailed code explanation)

In the previous article "Teach you how to use window to mount EFI partition (with code)", I introduced you how to use window to mount EFI partition. The following article will help you understand how to implement refresh-free upload and download with Ajax. Friends in need can refer to it. I hope it will be helpful to you.

AboutajaxNo refresh upload and download

This is a content that has little content but is used a lot and is not suitable. As for the issue of not talking about it, I really don’t want to talk about it because there’s nothing much to say.

About uploading

Use Flash, ActiveXUpload, slightly...

Write it yourselfXMLHttpRequest

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

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

What I want to say here is formData, this shit was only fully supported after IE10, IE9 It's a semi-remnant product. So what I want to talk about is the third way to achieve it by combining form and iframe. The principle is:

hidden form and iframe , target of form points to iframe, and listens to iframe load to obtain the upload result.

Advantages: Compatible with damn ielower version browsers

Disadvantages: Cross-domain upload is not supported, and a custom reverse proxy is required because iframe onload Cross-domain not supported

Upload interface API: Successful return:

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

Failure return:

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

About downloading:

A more violent download is direct

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

Advantages: less code.

Disadvantages: Modern browsers will automatically recognize file types, such as pdf, and will automatically open

for a more elegant download:

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

Advantages: Solve the defect of automatically opening files in violent downloads

Disadvantages: Does not support post downloading

Use XMLHttpRequest, BLOB method

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

Advantages: Support postmethod

Disadvantages: Still a damn compatibility issue

So the best way to deal with compatibility is form combined with iframe (regardless of compatibility, of course it is still XMLHttpRequest Best), this method is perfectly supported for both uploading and downloading. Upload and download are common.

The best way to upload and download: Your Boss is not required to be compatible with ielower version browsers

[End]

Recommended learning: AJAX video tutorial

The above is the detailed content of An article explaining how to implement refresh-free upload and download via ajax (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!