ajax无刷新上传和下载
关于ajax无刷新上传和下载
这是一个没什么含量但是又用的比较多又不得不说的问题，其实真的不想说，因为没什么好说的。
关于上传
1、使用Flash,ActiveX 上传 ，略...
2、自己写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);
3、使用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>
关于下载：
1、暴力一点的下载直接
window.open('/rest/donwload/abcd.do')
优点：代码量少。
缺点：现代浏览器会自动识别文件类型，如pdf，会自动在浏览器打开
2、优雅一点的下载：
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方式下载
3、使用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低版本浏览器
[完]
