之前的文章《一招教你怎么使用window挂载EFI分区（附代码）》中，给大家介绍了怎么使用window挂载EFI分区。下面本篇文章给大家了解ajax实现无刷新上传和下载，有需要的朋友可以参考一下，希望对你们有所助。
关于ajax无刷新上传和下载
这是一个没什么含量但是又用的比较多又不得不说的问题，其实真的不想说，因为没什么好说的。
关于上传
使用Flash, ActiveX上传 ，略…
自己写XMLHttpRequest
// 准备FormDatavar 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来实现，原理：
隐藏的form和iframe，form的target指向iframe，监听iframe load，来获取上传结果。
优点：兼容该死的ie低版本浏览器
缺点：跨域上传不支持，还需自定义反向代理，因为iframe onload不支持跨域
上传接口API： 成功返回：
{ code: 1, msg: '上传成功'}
登录后复制
失败返回：
{ code: 0, msg: '上传失败'}
登录后复制
HTML：
登录后复制 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);
关于下载：
暴力一点的下载直接
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();}
登录后复制
优点：支持post方式
缺点：还是该死的兼容性问题
所以处理兼容性最好的方式 还是form结合iframe（不考虑兼容性当然还是XMLHttpRequest最好），这种方式不论是上传和下载 都是完美支持的。上传下载通用。
最好的上传下载方式： 你们的Boss不要求兼容ie低版本浏览器
[完]
推荐学习：AJAX视频教程
以上就是一文讲解ajax实现无刷新上传和下载（代码详解）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2708469.html
