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

UseFlash, 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 isformData, this shit was only fully supported afterIE10,IE9It's a semi-remnant product. So what I want to talk about is the third way to achieve it by combiningformandiframe. The principle is:

hiddenformandiframe,targetofformpoints toiframe, and listens toiframe loadto obtain the upload result.

Advantages: Compatible with damnielower version browsers

Disadvantages: Cross-domain upload is not supported, and a custom reverse proxy is required becauseiframe onloadCross-domain not supported

Upload interfaceAPI: Successful return:

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

Failure return:

{ code: 0, msg: '上传失败' }

HTML:

 ... .. 
   

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 aspdf, 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 supportpostdownloading

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: Supportpostmethod

Disadvantages: Still a damn compatibility issue

So the best way to deal with compatibility isformcombined withiframe(regardless of compatibility, of course it is stillXMLHttpRequestBest), this method is perfectly supported for both uploading and downloading. Upload and download are common.

The best way to upload and download: YourBossis not required to be compatible withielower 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!