Ajax实现下载进度条

要实现下载进度条，可以使用Ajax向服务器发送一个下载请求，并通过Ajax的回调函数来获取下载的进度信息。具体实现步骤如下：

1. 在HTML页面中添加一个进度条元素，比如使用Bootstrap中的进度条组件：

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

2. 在JavaScript中使用Ajax向服务器发送一个下载请求，并设置对应的回调函数。在回调函数中，可以更新进度条的进度：

$.ajax({
  url: 'download.php',
  type: 'GET',
  dataType: 'json',
  xhrFields: {
    onprogress: function(e) {
      if (e.lengthComputable) {
        var percent = Math.round((e.loaded / e.total) * 100);
        $('.progress-bar').width(percent + '%');
        $('.progress-bar').attr('aria-valuenow', percent);
      }
    }
  },
  success: function(data) {
    // 下载完成后的处理
  }
});

3. 在服务器端的下载脚本中，需要设置正确的Content-Type和Content-Disposition头信息，以及使用chunked编码方式输出文件内容，这样才能让浏览器正确地获取下载进度信息：

header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename="file.zip"');
header('Content-Transfer-Encoding: chunked');
header('Cache-Control: must-revalidate');
header('Pragma: public');

$buffer = 1024 * 8;
$size = filesize($filepath);
$handle = fopen($filepath, 'rb');
while (!feof($handle)) {
  $data = fread($handle, $buffer);
  echo $data;
  ob_flush();
  flush();
}
fclose($handle);

这样就可以实现一个基于Ajax的下载进度条了。需要注意的是，不同的浏览器和服务器可能对于chunked编码方式有不同的支持，因此可能需要进行一些兼容性处理。