如何上传文件并查看进度条？

<form>
  <input type="file" id="fileInput">
  <button type="button" onclick="uploadFile()">上传</button>
</form>
<div id="progressBar"></div>

function uploadFile() {
  var fileInput = document.getElementById("fileInput");
  var file = fileInput.files[0];
  
  var xhr = new XMLHttpRequest();
  xhr.upload.addEventListener("progress", updateProgress);
  
  xhr.open("POST", "/upload", true);
  xhr.send(file);
}

function updateProgress(event) {
  if (event.lengthComputable) {
    var percent = event.loaded / event.total * 100;
    $("#progressBar").width(percent + "%");
  }
}