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

<!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. 体验一把haskell

    这几天做到PAT一道比较数据大小的题PAT1065,题目不难,应该说是一道送分题,就是开数组,然后模拟人工计算的过程进行计算,再比较下就行.做完之后,联想到haskell的Integer类型是无限大的 ...

  2. alert(1) to win 3

    function escape(s) { s = JSON.stringify(s); return '<script>console.log(' + s + ');</script ...

  3. 在MySQL登录时出现Access denied for user 'root'@'localhost' (using password: YES) 拒绝访问，并可修改MySQL密码

    这两天装了一个mysql 5.7数据库,但是在本地dos登陆不上去,报错Access denied for user 'root'@'localhost'(using password:YES): 也 ...

  4. 【串线篇】spring boot配置文件加载位置

    springboot 启动会扫描以下位置的application.properties或者application.yml文件作为Spring boot的默认配置文件 (1)–file:./config/ ...

  5. Java数组重修，猜数小游戏改进和打印正三角形

    数组重修,猜数小游戏 要求:从键盘输入一个数,判断数组是否包含此数,运用随机数 我们可能会这样写 import java.util.Random; import java.util.Scanner; ...

  6. 考研结束-开启新生活---markdown语法

    markdown语法 考研结束,正式开始提高自己的技术储备. 第一步当然是找到自己原先的博客园,记录下自己的足迹 将博客园设置为markdown编辑器 找到一篇关于markdown的语法介绍 原博文链 ...

  7. 【leetcode】1079. Letter Tile Possibilities

    题目如下: You have a set of tiles, where each tile has one letter tiles[i]printed on it.  Return the num ...

  8. Prometheus + Grafana 监控SpringBoot应用

      一.用到的工具 Prometheus Grafana Micrometer Grafana Dashboard (4701)   二.安装和运行Prometheus 官网下载prometheus- ...

  9. php key()函数 语法

    php key()函数 语法 作用:返回数组内部指针当前指向元素的键名.大理石构件支架 语法:key(array) 参数: 参数 描述 array 必需.规定要使用的数组. 说明:返回数组内部指针当前 ...

  10. 20180809-Java继承

    // A.java public class A{ private int i; protected int j; public void func(){ }} // B.javapublic cla ...