html文件上传进度条

要实现HTML文件上传进度条，需要使用JavaScript和XMLHttpRequest对象（XHR）。以下是一个基本的HTML文件上传进度条的实现：

1. HTML代码：

<form id="uploadForm" method="post" enctype="multipart/form-data">
  <input type="file" name="file" id="fileInput">
  <button type="button" onclick="uploadFile()">Upload</button>
</form>
<div id="progressBar"></div>

2. JavaScript代码：

function uploadFile() {
  var xhr = new XMLHttpRequest();
  var formData = new FormData(document.getElementById("uploadForm"));

  xhr.upload.onprogress = function(event) {
    if (event.lengthComputable) {
      var percentComplete = Math.round((event.loaded / event.total) * 100);
      document.getElementById("progressBar").style.width = percentComplete + "%";
      document.getElementById("progressBar").innerHTML = percentComplete + "%";
    }
  };

  xhr.open("POST", "upload.php", true);
  xhr.send(formData);
}

在上面的代码中，我们首先获取文件上传表单和进度条的DOM元素，然后创建一个XHR对象，并将表单数据作为参数传递给send方法。我们还将XHR对象的upload.onprogress事件处理程序设置为一个匿名函数，该函数将根据上传进度更新进度条的宽度和文本。

请注意，这只是一个基本示例，可以根据需要进一步改进。例如，可以添加错误处理程序，以便在上传期间发生错误时提供用户友好的错误消息。