如何正确显示文件上传进度？

25 min read

您可以使用JavaScript和HTML5提供的File API来显示上传文件的进度。以下是一些基本的步骤：

  1. 创建一个HTML表单，其中包含一个file类型的输入，以便用户选择要上传的文件。
<form>
  <input type="file" id="myFile">
  <button type="submit" onclick="uploadFile()">Upload</button>
</form>
  1. 使用JavaScript的XMLHttpRequest对象来发送文件到服务器，并使用FormData对象来包装文件数据。在这个过程中，您可以使用XMLHttpRequest对象的upload属性来跟踪上传的进度。
function uploadFile() {
  var fileInput = document.getElementById("myFile");
  var file = fileInput.files[0];
  var xhr = new XMLHttpRequest();
  xhr.upload.addEventListener("progress", uploadProgress, false);
  xhr.open("POST", "/uploadFile");
  var formData = new FormData();
  formData.append("file", file);
  xhr.send(formData);
}
  1. 编写一个上传进度函数，以便在上传进程中更新进度栏。您可以使用event.loaded和event.total属性来计算进度百分比。
function uploadProgress(event) {
  var percentComplete = Math.round((event.loaded / event.total) * 100);
  // 更新进度栏
}
  1. 最后，您可以将进度百分比更新为页面上的进度条或文本。如果您希望显示一个进度条，您可以使用HTML5的元素。例如：
<progress id="progressBar" max="100" value="0"></progress>

然后，在uploadProgress函数中，您可以通过使用以下代码来更新进度条：

var progressBar = document.getElementById("progressBar");
progressBar.value = percentComplete;