最近项目需要做一个下载文件的进度条，看网上上传文件进度条下载，特分享出来方便大家查阅

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>下载进度条</title>
</head>
<style type="text/css">
    .containerBar{
        width:521px;
        border:1px solid #008fcd;
        height:21px;
        border-radius: 10px;
        overflow: hidden;
    }
    #bar{
        background:#008fcd;
        float:left;
        height:100%;
        text-align:center;
        line-height:150%;
    }
    #total{
      margin-bottom:20px;
    }
    /* 加载中 */
    #loading1{
      padding:10px 0 0 80px;
      height:32px;
    }
    #loading1 span{
      position: absolute;
      left: 40px;
    }
    .demo1 {
     width: 4px;
     height: 4px;
     border-radius: 2px;
     background: #008fcd;
     float: left;
     margin: 5px 3px;
     animation: demo1 linear 1s infinite;
     -webkit-animation: demo1 linear 1s infinite;
 }
 .demo1:nth-child(1){
     animation-delay:0s;
 }
 .demo1:nth-child(2){
     animation-delay:0.15s;
 }
 .demo1:nth-child(3){
     animation-delay:0.3s;
 }
 .demo1:nth-child(4){
     animation-delay:0.45s;
 }
 .demo1:nth-child(5){
     animation-delay:0.6s;
 }
 @keyframes demo1 
 {
     0%,60%,100% {transform: scale(1);}
     30% {transform: scale(2.5);}
 }
 @-webkit-keyframes demo1 
 {
     0%,60%,100% {transform: scale(1);}
     30% {transform: scale(2.5);}
 }
</style>
<body>
<div class="containerBar">
    <div id="bar" style="width:0%;"></div>
</div>
<span id="total" >0%</span>
<div id="loading1">
  <span>正在生成码包</span>
  <div class="demo1"></div>
  <div class="demo1"></div>
  <div class="demo1"></div>
  <div class="demo1"></div>
  <div class="demo1"></div>
</div>
</body>
<script type="text/javascript">
  function getTimeNow(){//当前时间201909290420
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth()+1;
    var day = date.getDate();
    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    let nowTime = year.toString()+addZero(month).toString()+addZero(day).toString()+addZero(hour).toString()+addZero(minute).toString()+addZero(second).toString()
    return nowTime
  }
  function addZero(num){
    if(num < 10){
      num = '0'+num
    }else{
      num = num
    }
    return num
  }
  function closeModal(){
      $(".ivu-modal-body").empty();
      $("#ivu-modal-dialog").hide();
  };
  $(function(){
      var page_url = '';
      var req = new XMLHttpRequest();
      req.open("get", page_url, true);
      $("#total").css('display','none');
      req.addEventListener("progress", function (evt) {
        console.log(evt)
          if (evt.lengthComputable) {
              $("#total").css('display','block');
              $("#loading1").css('display','none')
              var percentComplete = Number((evt.loaded / evt.total).toString().match(/^\d+(?:\.\d{0,2})?/));
              console.log(percentComplete);
              let bar = document.getElementById("bar")
              console.log(bar)
              if(bar != null && bar != 'bull'){
                console.log(bar)
                bar.style.width=(percentComplete * 100) + "%";
                $("#total").html( Math.floor(percentComplete * 100) + "%");
              }
              if(percentComplete == 1){
                setTimeout(function()  {
                    //下载完成要执行的操作
                }, 500);
              }
          }
      }, false);
      req.responseType = "blob";
      req.onreadystatechange = function () {
          if (req.readyState === 4 && req.status === 200) {
              var filename = params.noticeOrderNo+'_'+getTimeNow()+'.zip';
              if (typeof window.chrome !== 'undefined') {
                  // Chrome version
                  var link = document.createElement('a');
                  link.href = window.URL.createObjectURL(req.response);
                  link.download = filename;
                  link.click();
              } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
                  // IE version
                  var blob = new Blob([req.response], { type: 'application/force-download' });
                  window.navigator.msSaveBlob(blob, filename);
              } else {
                  // Firefox version
                  var file = new File([req.response], filename, { type: 'application/force-download' });
                  window.open(URL.createObjectURL(file));
              }
          }
      };
      req.send();
  })
</script>
</html>
 
效果图为：

ajax axios 下载文件时如何获取进度条 process的更多相关文章

  1. struts2：上传多个文件时实现带进度条、进度详细信息的示范

    上一篇文章讲了上传单个文件与上传多个文件(属性驱动)的例子.本例是上传多个文件(属性驱动),并且显示进度条.进度详细信息的示范. 在文件上传选择界面,允许用户增加.删除选择的文件,且只能上传指定类型的 ...

  2. HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条

    页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...

  3. vue+element UI + axios封装文件上传及进度条组件

    1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...

  4. 用idhttp打开网页或下载文件时如何显示进度

    在它的workbegin work事件中写代码 procedure TfrmDownLoad.IdHTTP1WorkBegin(Sender: TObject;   AWorkMode: TWorkM ...

  5. python request下载文件时，显示进度以及网速

    import requests import time def downloadFile(name, url): headers = {'Proxy-Connection':'keep-alive'} ...

  6. ajax方式下载文件

    在web项目中需要下载文件,由于传递的参数比较多(通过参数在服务器端动态下载指定文件),所以希望使用post方式传递参数.通常,在web前端需要下载文件,都是通过指定<a>标签的href属 ...

  7. 下载文件时-修改文件名字 Redis在Windows中安装方法 SVN安装和使用(简单版) WinForm-SQL查询避免UI卡死 Asp.Net MVC Https设置

    下载文件时-修改文件名字   1后台代码 /// <summary> /// 文件下载2 /// </summary> /// <param name="Fil ...

  8. WPF下载远程文件，并显示进度条和百分比

    WPF下载远程文件,并显示进度条和百分比 1.xaml <ProgressBar HorizontalAlignment="Left" Height="10&quo ...

  9. 使用HttpURLConnection下载文件时出现 java.io.FileNotFoundException彻底解决办法

    使用HttpURLConnection下载文件时经常会出现 java.io.FileNotFoundException文件找不到异常,下面介绍下解决办法 首先设置tomcat对get数据的编码:con ...

随机推荐

  1. gulp自动化构建工具使用总结

    简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...

  2. SpringMVC的@ResponseBody注解简介

    SpringMVC简介 SpringMVC也叫Spring Web MVC 属于展示层框架.是Spring框架的一部分. 核心组件类DispatherServlet springMVC是围绕Dispa ...

  3. 四种会话跟踪技术以及jstl介绍

    四种会话跟踪技术 page:代表与一个页面相关的对象和属性.一个页面由一个编译好的 Java servlet 类(可以带有任何的 include 指令,但是没有 include 动作)表示.这既包括 ...

  4. Task3.PyTorch实现Logistic regression

    1.PyTorch基础实现代码 import torch from torch.autograd import Variable torch.manual_seed(2) x_data = Varia ...

  5. 冒泡排序算法-python

    冒泡排序:每两个相互比较,总是选出大的相互交换,直至最后选出该列表中最大的数字 def bubbleSort(myList): for i in range(len(myList)-1):#一共进行几 ...

  6. centos 配置vlan

    https://access.redhat.com/documentation/zh-cn/red_hat_enterprise_linux/7/html/networking_guide/sec-c ...

  7. 回归平方和 ESS，残差平方和 RSS，总体平方和 TSS

    https://zhidao.baidu.com/question/565190261749684764.html 回归平方和 ESS,残差平方和 RSS,总体平方和 TSS   总变差       ...

  8. [CSP-S模拟测试]:Equation（数学+树状数组）

    题目描述 有一棵$n$个点的以$1$为根的树,以及$n$个整数变量$x_i$.树上$i$的父亲是$f_i$,每条边$(i,f_i)$有一个权值$w_i$,表示一个方程$x_i+x_{f_i}=w_i$ ...

  9. 笨办法学Python（learn python the hard way）--练习程序1-10

    下面是当初看这本书时按照书中的代码做的练习,一行一行敲下来的,都已经试运行过,没有错误(基于python3),练习1-练习10 #ex1.py 1 #print("Hello world!& ...

  10. 电脑如何连接windows server服务器

    第一步:win+r 启动‘运行’,输入mstsc 第二步:连接远程桌面,输入服务器ip 第三步,输入账户密码,登陆即可. 注释:mstsc,全称 Microsoft Telnet Screen Con ...