js 文件下载 进度条
2024-10-19 17:29:45
js:
/**
* 下载文件 - 带进度监控
* @param url: 文件请求路径
* @param params: 请求参数
* @param name: 保存的文件名
* @param progress: 进度处理回调函数
* @param success: 下载完成回调函数
* eg: progressDownLoad({url:'http://loacalhost:8080/downLoad.action',name:'file.rar',progress:function(evt){
* console.log(evt);
* }});
**/
function progressDownLoad({url,filename,params,progress,success}){
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
//监听进度事件
xhr.addEventListener("progress", function (evt) {
if(progress) try{ progress.call(evt); }catch(e){}
}, false); xhr.responseType = "blob";
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
if (typeof window.chrome !== 'undefined') {
// Chrome version
var link = document.createElement('a');
link.href = window.URL.createObjectURL(xhr.response);
link.download = filename;
link.click();
} else if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE version
var blob = new Blob([xhr.response], { type: 'application/force-download' });
window.navigator.msSaveBlob(blob, filename);
} else {
// Firefox version
var file = new File([xhr.response], filename, { type: 'application/force-download' });
window.open(URL.createObjectURL(file));
}
if(success) try{ success.call(xhr); }catch(e){}
}
};
// FormData
//var formData = new FormData();
var paramsStr = '';
if(params) for (var key in params) paramsStr += '&'+key+'='+params[key];
if(paramsStr) paramsStr = paramsStr.substring(1); xhr.send(paramsStr);
}
XMLHttpRequest的监听事件:
onabort |
当请求中止时触发 |
onload |
当请求成功时触发 |
onloadend |
在请求成功或者失败时触发;load、abort、error、timeout事件发生之后 |
onloadstart |
当请求开始时触发 |
onreadystatechange |
当readyStateChange属性改变时触发 |
ontimeout |
当timeout属性指定的时间已经过去但响应依旧没有完成时触发 |
onerror |
当请求因错误失败时触发。注意404等状态码不是error,因为此时响应仍然是成功完成的。 |
onprogress |
当响应主体正在下载重复触发(约每隔50ms一次) |
最新文章
- Android C代码回调java方法
- Bootstrap表单布局样式
- 转:C++编程隐蔽错误:error C2533: 构造函数不能有返回类型
- Delphi线程同步(临界区、互斥、信号量)
- TypeError: validator.settings[(";on"; + event.type)].call is not a function
- ajax 数据回传
- Backbone入门教程
- 在阿里云服务器中用IP连接SQLserver2014提示40,53错误
- Android 9.0/P http 网络请求的问题
- mysql表加锁、全表加锁、查看加锁、解锁
- strftime使用%F格式化日期失败
- vux icon
- js上传文件(可自定义进度条)
- 每天CSS学习之transform
- MySQL mysqldump 数据备份
- Day44 数据库的操作
- pom xml testng
- Python数据处理实例
- 关于windows上 web 和 ftp 站点的创建及使用
- gearman background后台job状态获取