基于Javascript实现文件实时加载进度的方法

实现文件实时加载进度的方法本质上就是通过监听HTTP请求，统计请求发起时和请求完成时的时间，并通过计算来得出百分比进度。下面是实现文件实时加载进度的详细教程：

准备工作

首先，在页面中引入jQuery：

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

实现过程

1. XMLHttpRequest

使用XMLHttpRequest对象来监听HTTP请求，这个对象可以在请求发送之后和请求完成之前分别监听其状态的变化。

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(event) {
  if (xhr.readyState === 4) {
    // 请求完成
  }
};

xhr.open('GET', url);
xhr.send();

2. 获取文件大小

在请求刚开始时，可以通过获取文件的大小来作为总进度的100%。

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(event) {
  if (xhr.readyState === 1) {
    // 获取文件大小
    filesize = xhr.getResponseHeader('Content-Length');
  } else if (xhr.readyState === 4) {
    // 请求完成
  }
};

xhr.open('GET', url);
xhr.send();

3. 监听进度

使用XMLHttpRequest对象的progress事件来监听文件的加载进度。在每次触发progress事件时，可以根据上传的数据大小计算出当前的进度。

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(event) {
  if (xhr.readyState === 1) {
    // 获取文件大小
    filesize = xhr.getResponseHeader('Content-Length');
  } else if (xhr.readyState === 3) {
    // 获取已加载的数据大小
    var loaded = xhr.responseText.length;
    // 计算当前进度
    var percent = loaded/filesize;
    // 显示进度
    console.log('进度：' + percent.toFixed(2));
  } else if (xhr.readyState === 4) {
    // 请求完成
  }
};

xhr.open('GET', url);
xhr.send();

4. 显示进度条

可以通过一些UI库来快速地构建进度条，如Bootstrap，或者自己手动用CSS构建。

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuemin="0" aria-valuemax="100">
    <span class="sr-only">0% Complete</span>
  </div>
</div>

使用jQuery来更新进度条的宽度和百分比。

var xhr = new XMLHttpRequest();
var progress = $('.progress-bar');

xhr.onreadystatechange = function(event) {
  if (xhr.readyState === 1) {
    // 获取文件大小
    filesize = xhr.getResponseHeader('Content-Length');
  } else if (xhr.readyState === 3) {
    // 获取已加载的数据大小
    var loaded = xhr.responseText.length;
    // 计算当前进度
    var percent = loaded/filesize;
    // 更新进度条
    progress.width(percent*100+'%').html(Math.round(percent*100)+'%');
  } else if (xhr.readyState === 4) {
    // 请求完成
  }
};

xhr.open('GET', url);
xhr.send();

示例1：在图片加载过程中实现进度条效果

<img src="test.jpg" alt="测试图片" id="img1">
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuemin="0" aria-valuemax="100">
    <span class="sr-only">0% Complete</span>
  </div>
</div>

var img = document.getElementById('img1');
var xhr = new XMLHttpRequest();
var progress = $('.progress-bar');

xhr.onreadystatechange = function(event) {
  if (xhr.readyState === 1) {
    // 获取文件大小
    filesize = xhr.getResponseHeader('Content-Length');
  } else if (xhr.readyState === 3) {
    // 获取已加载的数据大小
    var loaded = xhr.responseText.length;
    // 计算当前进度
    var percent = loaded/filesize;
    // 更新进度条
    progress.width(percent*100+'%').html(Math.round(percent*100)+'%');
  } else if (xhr.readyState === 4) {
    // 请求完成
    img.src = URL.createObjectURL(xhr.response);
  }
};

xhr.open('GET', 'test.jpg');
xhr.responseType = 'blob';
xhr.send();

示例2：在音频文件加载过程中实现进度条效果

<audio src="test.mp3" controls preload="none"></audio>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuemin="0" aria-valuemax="100">
    <span class="sr-only">0% Complete</span>
  </div>
</div>

var audio = document.getElementsByTagName('audio')[0];
var xhr = new XMLHttpRequest();
var progress = $('.progress-bar');

xhr.onreadystatechange = function(event) {
  if (xhr.readyState === 1) {
    // 获取文件大小
    filesize = xhr.getResponseHeader('Content-Length');
  } else if (xhr.readyState === 3) {
    // 获取已加载的数据大小
    var loaded = xhr.responseText.length;
    // 计算当前进度
    var percent = loaded/filesize;
    // 更新进度条
    progress.width(percent*100+'%').html(Math.round(percent*100)+'%');
  } else if (xhr.readyState === 4) {
    // 请求完成
    audio.src = URL.createObjectURL(xhr.response);
  }
};

xhr.open('GET', 'test.mp3');
xhr.responseType = 'blob';
xhr.send();