已提交表单的进度条($_SERVER["PHP_SELF"])

<form id="myForm" action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">
  <!-- 表单内容 -->
  <input type="submit" value="提交">
</form>
<div id="progressBar"></div>

#progressBar {
  width: 0%;
  height: 10px;
  background-color: blue;
  transition: width 0.5s;
}

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  var progressBar = document.getElementById("progressBar");
  progressBar.style.width = "0%"; // 重置进度条宽度为0%
  
  // 异步提交表单数据
  var formData = new FormData(this);
  var xhr = new XMLHttpRequest();
  xhr.open("POST", this.action, true);
  xhr.upload.addEventListener("progress", function(event) {
    if (event.lengthComputable) {
      var percentComplete = (event.loaded / event.total) * 100;
      progressBar.style.width = percentComplete + "%"; // 更新进度条宽度
    }
  });
  xhr.send(formData);
});

// 处理表单提交
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  // 处理表单数据
  // ...
  
  // 返回响应
  // ...
}