带进度条的文件上传 - HTML

在网页上实现文件上传是一个常见的需求。为了改善用户体验，添加一个进度条能够提高上传流程的可视化。在HTML中使用JavaScript来实现带进度条的文件上传非常简单。

实现步骤

HTML部分

首先，在HTML中添加一个文件选择框和一个进度条元素。例如：

<input type="file" id="fileInput">
<progress id="progressBar" value="0" max="100"></progress>

以上代码创建了一个文件上传框和一个进度条元素，进度条的最大值为100，当前值为0。

JavaScript部分

接下来需要通过JavaScript来实现上传和进度条的更新。

首先，获取文件上传框和进度条：

const fileInput = document.getElementById("fileInput");
const progressBar = document.getElementById("progressBar");

接着，为上传框添加事件监听器，当选择了文件后会触发事件。

fileInput.addEventListener("change", () => {
  const file = fileInput.files[0]; // 获取文件对象
  const xhr = new XMLHttpRequest(); // 创建一个XMLHttpRequest对象
  xhr.open("POST", "/upload"); // 设置POST请求，upload为上传接口地址
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log("文件上传成功");
    }
  };
  xhr.upload.addEventListener("progress", (event) => {
    // 更新进度条
    const percent = event.loaded / event.total * 100;
    progressBar.value = percent;
  });
  // 创建FormData对象，将文件添加到formData中
  const formData = new FormData();
  formData.append("file", file);
  // 发送请求
  xhr.send(formData);
});

以上代码实现了文件上传的功能。当文件上传的进度改变时，事件处理函数中更新了进度条的值，使得用户能够实时看到上传的进度。

进一步改进

以上代码只是最基础的文件上传，如果需要将文件上传的进度以文字形式呈现给用户，需要进一步改进。

将进度值显示在进度条下方：

<progress id="progressBar" value="0" max="100"></progress>
<p id="status"></p>

xhr.upload.addEventListener("progress", (event) => {
  // 更新进度条
  const percent = event.loaded / event.total * 100;
  progressBar.value = percent;
  // 更新进度状态文字
  const status = `上传进度：${percent.toFixed(2)}%`;
  document.getElementById("status").textContent = status;
});

该代码将进度值以文本的形式更新到了页面上。

总结

以上代码实现了带进度条的文件上传。通过获取文件对象、创建XMLHttpRequest对象、添加进度事件监听器等操作，我们实现了文件的上传，并通过向进度条元素更新值和文本的方式将上传的进度展示给用户，提高了用户体验。