在不知道总文件大小的情况下如何跟踪 XMLHttpRequest 中的下载进度？

监控 XMLHttpRequest 的进度

XMLHttpRequest (XHR) 提供了一种从 JavaScript 执行异步请求的机制。虽然它支持使用 xhr.upload.onprogress 事件跟踪上传进度，但由于缺乏有关要接收的总字节数的信息，获取下载进度并不那么简单。

跟踪上传进度

获取上传进度比较简单。浏览器维护有关正在上传的文件大小和传输的数据量的信息，从而可以通过 xhr.upload.onprogress 事件获取进度。

监控下载进度

对于下载来说，挑战来自于浏览器无法知道传入数据的大小。但是，可以通过在服务器响应中设置 Content-Length 标头来克服这个问题，该标头指定要传输的数据的总大小。

服务器端配置

服务器端负责交付内容的代码应根据正在下载的文件或数据的大小设置 Content-Length 标头。示例：

$filesize = filesize('test.zip');

header("Content-Length: " . $filesize); // Set header length
readfile('test.zip');
exit 0;

客户端实现

设置 Content-Length 标头后，客户端代码现在可以跟踪下载进度：

function updateProgress(evt) {
  if (evt.lengthComputable) {
    // evt.loaded: Bytes received by the browser
    // evt.total: Total bytes defined by the header
    var percentComplete = (evt.loaded / evt.total) * 100;
    $('#progressbar').progressbar("option", "value", percentComplete);
  }
}

function sendreq(evt) {
  var req = new XMLHttpRequest();
  $('#progressbar').progressbar();
  req.onprogress = updateProgress;
  req.open('GET', 'test.php', true);
  req.onreadystatechange = function (aEvt) {
    if (req.readyState == 4) {
      // Callback actions here
    }
  };
  req.send();
}

此代码使用 jQuery UI 库创建一个进度条，显示接收数据时的进度百分比。通过利用 Content-Length 标头，浏览器可以准确计算并显示下载进度，这对于需要视觉进度指示器的大文件下载非常有用。

以上是在不知道总文件大小的情况下如何跟踪 XMLHttpRequest 中的下载进度？的详细内容。更多信息请关注PHP中文网其他相关文章！