如何在javascript-ajax中提交表单时显示进度条

<form id="myForm">
  <!-- 表单内容 -->
  <input type="text" name="name" placeholder="姓名">
  <input type="email" name="email" placeholder="邮箱">
  <button type="submit">提交</button>
</form>

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单默认提交行为

  var form = event.target;
  var progressBar = document.getElementById("progressBar");

  // 创建一个FormData对象，用于将表单数据序列化
  var formData = new FormData(form);

  // 创建一个XMLHttpRequest对象
  var xhr = new XMLHttpRequest();

  // 监听XMLHttpRequest的进度事件
  xhr.upload.addEventListener("progress", function(e) {
    if (e.lengthComputable) {
      var percent = Math.round((e.loaded / e.total) * 100);
      progressBar.style.width = percent + "%";
      progressBar.innerHTML = percent + "%";
    }
  });

  // 监听XMLHttpRequest的完成事件
  xhr.addEventListener("load", function() {
    // 处理请求完成后的逻辑
    if (xhr.status === 200) {
      // 请求成功
      console.log(xhr.responseText);
    } else {
      // 请求失败
      console.error("请求失败：" + xhr.status);
    }
  });

  // 发送POST请求
  xhr.open("POST", "your-server-url");
  xhr.send(formData);
});

<div id="progressBarContainer">
  <div id="progressBar"></div>
</div>

#progressBarContainer {
  width: 100%;
  height: 20px;
  background-color: #f0f0f0;
}

#progressBar {
  width: 0;
  height: 100%;
  background-color: #4caf50;
  transition: width 0.3s ease;
  text-align: center;
  line-height: 20px;
  color: #fff;
}