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

<!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. web源码泄露

    http://www.am0s.com/ctf/175.html vim 文件泄露 1.备份文件 源文件:index.php 备份文件:index.php~ 2.临时文件 源文件:index.php ...

  2. 前端每日实战：25# 视频演示如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YLRLaM 可交互视频教程 此视频 ...

  3. window.onload()和$(document).ready的区别（ $(document).ready == $(function(){ }) ）

    首先$(function(){}) 和 $(document).ready(function(){}) 是一个方法,$(function(){})为简写(用的多) $(document).ready和 ...

  4. Graph Neural Networks for Computer Vision

    Graph Neural Networks for Computer Vision I was attracted by this image: This is an inspiring image ...

  5. IDEA git 合并多个commit

    当前三个commit,demo1,demo2,demo3 选择demo1右键 选择action 跟着指示操作,最后合并 时间线: Log 框时间线:是从上到下,越来越早. 弹出框时间线:是从上到下,越 ...

  6. 方法返回前面有if - else if - else ，最终返回值是？

    -(NSString *)testA{ int a = ?; ) { return @"a大于5"; } ) { return @"a不大于5"; } retu ...

  7. php stristr()函数 语法

    php stristr()函数 语法 作用:返回一个字符串在另一个字符串中开始位置到结束的字符串,不区分大小写.直线电机厂家怎么样? 语法:stristr(string,search,before_s ...

  8. CSS中浮动属性float及清除浮动

    1.float属性 CSS 的 Float(浮动),会使元素向左或向右移动,由于浮动的元素会脱离文档流,所以它后面的元素会重新排列. 浮动元素之后的那些元素将会围绕它,而浮动元素之前的元素将不会受到影 ...

  9. 数字类别生成onehot

    对应行的列#原始标签 my_label = np.array([3,4,2,4,6,1]) #类别数量 num_class = 6 #样本数量 num = my_label.shape[0] #生成o ...

  10. 【POJ2893&HDOJ6620】M × N Puzzle（n*m数码判定）

    题意:给定一个n*m的矩阵,其中不重复地填[0,n*m-1],问是否能通过有限步数将0移到右下角 n,m<=1e3 思路:结论题 当板子了 #include<bits/stdc++.h&g ...