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一次)

最新文章

  1. Android C代码回调java方法
  2. Bootstrap表单布局样式
  3. 转:C++编程隐蔽错误:error C2533: 构造函数不能有返回类型
  4. Delphi线程同步(临界区、互斥、信号量)
  5. TypeError: validator.settings[("on" + event.type)].call is not a function
  6. ajax 数据回传
  7. Backbone入门教程
  8. 在阿里云服务器中用IP连接SQLserver2014提示40,53错误
  9. Android 9.0/P http 网络请求的问题
  10. mysql表加锁、全表加锁、查看加锁、解锁
  11. strftime使用%F格式化日期失败
  12. vux icon
  13. js上传文件(可自定义进度条)
  14. 每天CSS学习之transform
  15. MySQL mysqldump 数据备份
  16. Day44 数据库的操作
  17. pom xml testng
  18. Python数据处理实例
  19. 关于windows上 web 和 ftp 站点的创建及使用
  20. gearman background后台job状态获取

热门文章

  1. 如何从Windows中删除Node.js
  2. python写机器人玩僵尸骰子
  3. .py文件右键添加Edit with IDLE
  4. struct和union,enum分析
  5. CentOS查看进程、杀死进程、启动进程等常用命令
  6. 【git】gitignore
  7. openal支持的通道数和声道数
  8. 关于django的操作(四)
  9. java_5.1 for循环
  10. linux命令学习之:sort