如何跟踪 XMLHttpRequest 操作的进度，尤其是大文件上传和下载？

监控 XMLHttpRequest 进度：综合指南

标准 XMLHttpRequest (XHR) API 缺乏对进度跟踪的内置支持，阻碍了在大文件期间显示进度条的努力上传。但是，许多浏览器提供非标准扩展来启用进度监控。

上传的字节数

要监控上传字节的进度，请利用 xhr.upload.onprogress 事件。浏览器知道正在上传的文件的大小和已传输的数据量，从而可以确定上传进度。

下载的字节数

确定下载字节的进度（使用 xhr.responseText 时）更加复杂，因为浏览器事先不知道正在传输的数据的总大小。一种解决方案是在服务器脚本中设置 Content-Length 标头来指定预期的总字节大小。

例如，如果我们的服务器脚本读取 5 秒的 ZIP 文件，我们可以按如下方式设置标头:

<code class="php">$filesize = filesize('test.zip');
header("Content-Length: " . $filesize); // Set header length
readfile('test.zip');
exit 0;</code>

通过设置 header，浏览器可以确定响应的总长度并相应地监控接收到的字节。

事件监控

要监控上传和下载的进度，请使用以下事件侦听器：

<code class="javascript">// Event listener for upload progress
xhr.upload.onprogress = function(evt) {
  if (evt.lengthComputable) {
    var uploadPercentage = (evt.loaded / evt.total) * 100;
    // Update progress bar or display percentage
  }
};

// Event listener for download progress
xhr.onprogress = function(evt) {
  if (evt.lengthComputable) {
    var downloadPercentage = (evt.loaded / evt.total) * 100;
    // Update progress bar or display percentage
  }
};</code>

示例

此示例演示了使用以下方法在文件下载期间监控进度： jQuery UI 的进度条：

<code class="javascript">function updateProgress(evt) {
  if (evt.lengthComputable) {
    var percentComplete = (evt.loaded / evt.total) * 100;
    $('#progressbar').progressbar("option", "value", percentComplete);
  }
}

function sendRequest() {
  var req = new XMLHttpRequest();
  $('#progressbar').progressbar();
  req.onprogress = updateProgress;
  req.onloadstart = function() {
    updateProgress({ loaded: 0, total: 0 });
  };
  req.open('GET', 'test.php', true);
  req.send();
}

// Sending the request
sendRequest();</code>

通过结合这些技术，您可以有效监控 XMLHttpRequest 操作的进度，从而在大文件传输时实现更人性化的体验。

以上是如何跟踪 XMLHttpRequest 操作的进度，尤其是大文件上传和下载？的详细内容。更多信息请关注PHP中文网其他相关文章！