之前的文章《一招教你怎么使用window挂载EFI分区(附代码)》中,给大家介绍了怎么使用window挂载EFI分区。下面本篇文章给大家了解ajax实现无刷新上传和下载,有需要的朋友可以参考一下,希望对你们有所助。
关于ajax
无刷新上传和下载
这是一个没什么含量但是又用的比较多又不得不说的问题,其实真的不想说,因为没什么好说的。
关于上传
使用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
来实现,原理:
隐藏的form
和iframe
,form
的target
指向iframe
,监听iframe load
,来获取上传结果。
优点:兼容该死的ie
低版本浏览器
缺点:跨域上传不支持,还需自定义反向代理,因为iframe onload
不支持跨域
上传接口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(); }
优点:支持post
方式
缺点:还是该死的兼容性问题
所以处理兼容性最好的方式 还是form
结合iframe
(不考虑兼容性当然还是XMLHttpRequest
最好),这种方式不论是上传和下载 都是完美支持的。上传下载通用。
最好的上传下载方式: 你们的Boss
不要求兼容ie
低版本浏览器
[完]
推荐学习:AJAX视频教程
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。