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

js 文件下载 进度条的更多相关文章

  1. nprogress.js 头部进度条使用方法

    nprogress.js 头部进度条 引入CSS\JS <link rel="stylesheet" type="text/css" href=" ...

  2. Python展示文件下载进度条

    前言 大家在用Python写一些小程序的时候,经常都会用到文件下载,对于一些较小的文件,大家可能不太在乎文件的下载进度,因为一会就下载完毕了. 但是当文件较大,比如下载chromedriver的时候, ...

  3. H5+Ajax+WebApi实现文件下载(进度条,多文件)

    前言 踩过的坑 1.WebAPI跨域 2.Jquery ajax低版本不支持XHR 2功能 3.Jquery ajax不支持Deferred的process事件 4.IE下文件名乱码问题 功能实现 & ...

  4. js 实现进度条功能。

    /** * 纯js进度条 * Created by kiner on 15/3/22. */ function progress(options){ this.w = (options &&a ...

  5. Js 百分比进度条

    [构想] CSS3 + JS CSS3控制进度 利用CSS3中的 @keyframes JS实现百分比 根据CSS来调整,时间 [页面代码] 第一种: 默认直接进入就是下载 CSS代码 body { ...

  6. vue项目实现文件下载进度条

    平时业务中下载文件方式常见的有俩种: 第一种,直接访问服务器的文件地址,自动下载文件: 第二种 ,服务器返回blob文件流,再对文件流进行处理和下载. 一般小文件适用于第一种下载方案,不占用过多服务器 ...

  7. js控制进度条到达100%跳转界面一

    进度条一般在手机上用到的比较广泛,刚好最近的项目也是一直在做手机站,这个特效是手机端的一个界面,现在我把改成pc端了,进度条的快慢速度和样式可自行调节,改动也是很方便的,不多说,看代码: <st ...

  8. js实现进度条

    不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. JS实现 进度条 不用控件

    demo1 <html> <head> <title>进度条</title> <style type="text/css"&g ...

随机推荐

  1. mysql里max_allowed_packet的作用

    MySQL根据配置文件会限制Server接受的数据包大小.有时候大的插入和更新会受 max_allowed_packet 参数限制,导致写入或者更新失败. 查看目前配置: 代码如下: show VAR ...

  2. SO减单后MO分配给其他SO的问题修复

    逻辑:MO取进FP系统之前,首先判断是否带有SO号+SO行号,如果带有SO号+SO行号,则判断此SO号和SO行号是否存在订单表中,如果不存在则表示此MO对应的订单已减单,此MO需要做过滤,并展现在报表 ...

  3. DRDS SQL兼容性

    SQL 兼容性 更新时间:2017-06-07 13:26:11     DRDS 高度兼容 MySQL 协议和语法,但由于分布式数据库和单机数据库存在较大的架构差异,存在 SQL 使用限制.相关兼容 ...

  4. python全栈开发 生成器 :生成器函数,推导式及生成器表达式

    python 全栈开发 1.生成器函数 2.推导式 3.生成器表达式 一.生成器函数 1.生成器: 生成器的本质就是迭代器 (1)生成器的特点和迭代器一样.取值方式和迭代器一样(__next__(), ...

  5. Numpy函数库基础

    利用Numpy函数库构造4*4随机数组,然后将数组转化为矩阵,然后矩阵与其逆矩阵相乘,计算机处理的误差 from numpy import * random.rand(4,4) print(rando ...

  6. js 小结

    <script type="text/javascript"> var hotalAddJs = { makeSubmitDataHandler: function ( ...

  7. 牛客网练习赛12---A and B

    A题传送门:https://www.nowcoder.net/acm/contest/68/A B题传送门:   https://www.nowcoder.net/acm/contest/68/B A ...

  8. ASP.Net MVC 中EF实体的属性取消映射数据库、自定义名称

    例如:数据库中一个字段名称为CompanyId 自定义实体数据名称 [Column("CompanyId")] public int Id{ get; set; } 这样就可以使用 ...

  9. NIO和IO(BIO)的区别及NIO编程介绍

    IO(BIO)和NIO的区别:其本质就是阻塞和非阻塞的区别. 阻塞概念:应用程序在获取网络数据的时候,如果网络传输数据很慢,那么程序就一直等着,直到传输完毕为止. 非阻塞概念:应用程序直接可以获取已经 ...

  10. [剑指Offer]判断一棵树为平衡二叉树(递归)

    题目链接 https://www.nowcoder.com/practice/8b3b95850edb4115918ecebdf1b4d222?tpId=0&tqId=0&rp=2&a ...