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

<!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. ffmpeg参数

    a) 通用选项 -L license-h 帮助-fromats 显示可用的格式,编解码的,协议的...-f fmt 强迫采用格式fmt-I filename 输入文件-y 覆盖输出文件-t durat ...

  2. idea 配置自动编译 livereload

    1 pom中添加 spring-boot-devtools 依赖 <dependency> <groupId>org.springframework.boot</grou ...

  3. 插头$DP$学习小结

    插头\(DP\)学习小结 这种辣鸡毒瘤东西也能叫算法... 很优秀的一个算法. 最基本的适用范围主要是数据范围极小的网格图路径计数问题. 如果是像\(Noi2018\)那种的话建议考生在其他两道题难度 ...

  4. 对props的研究

    Vue.component('my-component', { props: { // 基础的类型检查 (`null` 匹配任何类型) propA: Number, // 多个可能的类型 propB: ...

  5. 在vue项目中，解决如何在element表格中循环出图片列！

    效果图: 1,vue项目环境 2,引入element-ui组件 3,制作表格 此处省去制作循环表格数据那步,想看的可以找回我的博客:element中的表格处理:循环出表格数据 今天想在表格出循环出一列 ...

  6. 英语单词debug

    来源——docker官网首页https://www.docker.com/ 翻译 vt. 调试,排除故障,除错,改正有毛病部分 过去式 debugged 过去分词 debugged 现在分词 debu ...

  7. 2，ArrayList

    一,ArrayList简介 1,ArrayList 是一个数组队列,相当于动态数组.与Java中的数组相比,它的容量能动态增长. 2,ArrayList 继承了AbstractList,实现了List ...

  8. [USACO17JAN]Balanced Photo平衡的照片 (树状数组)

    题目链接 Solution 先离散化,然后开一个大小为 \(100000\) 的树状数组记录前面出现过的数. 然后查询 \((h[i],n]\) 即可. 还要前后各做一遍. Code #include ...

  9. 安装及启动Tomcat

    安装及启动Tomcat 法一:从命令行启动Tomcat: 配置环境变量 Windos+R输入cmd打开dos窗口转到D:\apache-tomcat-7.0.54\bin目录,并输入startup.b ...

  10. [CSP-S模拟测试]:凤凰院凶真（LCIS）

    题目描述 $\alpha$世界线.凤凰院凶真创立了反抗$SERN$统治的组织“瓦尔基里”.为了脱离$\alpha$线,他需要制作一个世界线变动率测量仪.测量一个世界线相对于另一个世界线的变动率,实质上 ...