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

<!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. 对provide/inject的研究

    1.组件中通过provider来提供变量,然后在子组件中通过inject来注入变量. 2.在父组件中定义: provide () { return { secondPageTableRoot: { t ...

  2. 使用vue进行国际化

    相对于网站等一些需求 我们有需要做国际化的需求,具体步骤如下: 首先安装 vue-i18n npm install vue-i18n import VueI18n from 'vue-i18n' Vu ...

  3. Oracle12c创建及删除PDB

    在12C R1版本中只支持Global Shared Undo模式,所有container共享一个UNDO表空间:在12C R2引入了PDB Local Undo模式,每个container都有自己的 ...

  4. C# 与 C++,语法差别有多小-第三章 C++数据类型 第一部分

    一,数据类型 C++: char  int short  long float double, unsigned long double(128位,19位有效数字), wchar_t, 浮点型文字常量 ...

  5. ueditor 复制word里面带图文的文章,图片可以直接显示

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用,但是项目要求需要支持所有的浏览器,包括Windows和macOS系统.没有办 ...

  6. 流氓软件修改IE主页的解决方法

    运行regedit HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Main 修改以下url Default_Page_URL Firs ...

  7. MySQL server has gone away 问题解决方法

    问题描述: SQLyog在执行大的sql文件时候,报错,报错日志显示2006 - MySQL server has gone away 解决办法: 在php.ini配置文件的[mysqld]节点下添加 ...

  8. Java Web学习笔记之---EL和JSTL

    Java Web学习笔记之---EL和JSTL (一)EL (1)EL作用 Expression  Language(表达式语言),目的是代替JSP页面中复杂的代码 (2)EL表达式 ${变量名} ( ...

  9. Vue通信、传值的多种方式,详解(都是干货)

    Vue通信.传值的多种方式,详解(都是干货) 可参考博客: https://blog.csdn.net/qq_35430000/article/details/79291287

  10. day18—Flex弹性布局详解(二)

    转行学开发,代码100天——2018-04-03 2.6 align-content属性 align-content 属性定义了在交叉轴方向对齐方式和额外空间分配,类似于justify-content ...