AJAX XHR 上传进度从一开始就是100%

在本文中，我们将介绍AJAX（Asynchronous JavaScript and XML）的XHR（XMLHttpRequest）上传进度，以及如何在上传过程中监测和显示上传进度。AJAX允许网页与服务器进行异步通信，XHR是用于在后台与服务器交换数据的一种技术。

阅读更多：AJAX 教程

什么是XHR上传进度？

在AJAX中进行文件上传时，为了提供更好的用户体验，我们通常需要显示上传进度条。XHR上传进度指的是上传操作的进展情况，通常以百分比的形式显示。

如何实现XHR上传进度？

要实现XHR上传进度，我们需要使用XMLHttpRequest对象以异步方式上传文件。然后，我们可以通过监听XHR对象的progress事件来获取上传的进度信息。以下是一个示例：

function uploadFile(file) {
  var xhr = new XMLHttpRequest();

  xhr.upload.addEventListener("progress", function(event) {
    if (event.lengthComputable) {
      var percentComplete = (event.loaded / event.total) * 100;
      console.log(percentComplete);
      // 在这里可以根据上传进度更新进度条或显示进度信息
    }
  }, false);

  xhr.open("POST", "/upload", true);
  xhr.send(file);
}

在上面的示例中，我们创建了一个XMLHttpRequest对象，并添加了一个监听器来监测上传进度。通过event.loaded和event.total属性，我们可以计算当前上传的百分比，并将其用于更新进度条或显示上传进度信息。

需要注意的是，为了保持进度的准确性，我们需要使用event.lengthComputable属性来确认是否可以计算上传进度。如果lengthComputable为false，表示无法确定上传进度。

如何展示XHR上传进度？

在展示XHR上传进度时，常见的方式是使用进度条或显示上传进度信息。我们可以通过更新进度条的宽度或文本来反映上传的进度。

以下是一个基于Bootstrap的示例，展示XHR上传进度的进度条：

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

function updateProgressBar(percentComplete) {
  var progressBar = document.querySelector(".progress-bar");
  progressBar.style.width = percentComplete + "%";
  progressBar.setAttribute("aria-valuenow", percentComplete);
  progressBar.innerHTML = percentComplete + "% Complete";
}

在上面的示例中，我们使用CSS样式来控制进度条的宽度，使用JavaScript来更新进度条的宽度和文本。

总结

通过使用XHR对象的progress事件，我们可以实现在AJAX文件上传过程中监测和显示上传进度。借助进度条或显示上传进度信息，我们可以提供更好的用户体验，并让用户清楚地了解上传的进展情况。AJAX的XHR上传进度使得文件上传变得更加直观和可控，为网页开发带来了更多的可能性。希望本文的介绍对你有所帮助！