Php 如何实现基于ajax响应的进度条

我曾尝试基于服务器端（PHP）的ajax响应实现进度条，但我无法识别进度条的计算，比如如何通过ajax计算提交表单的请求和响应之间的进度条计时

<script>
$('.uploadProject').on('submit',function(e){
      e.preventDefault();
    //ray.ajax();
    var formData = new FormData($(this)[0]);
    progress(80, $('#progressBar'));
    $.ajax({
        url: "ajax/submitted_project_action.php",
        type: "POST",
        data: formData,
        async: false,
        success: function (data) {
            if(data==1){
                window.location.href="submitted_project.php?success";
            }else{
                window.location.href="submitted_project.php?error";
            }
        },
        cache: false,
        contentType: false,
        processData: false
    });


})

$（'.uploadProject'）。在（'submit'，函数（e）上{
e、 预防默认值（）；
//ray.ajax（）；
var formData=新formData（$（此）[0]）；
进度（80美元）；
$.ajax({
url:“ajax/submitted_project_action.php”，
类型：“POST”，
数据：formData，
async:false，
成功：功能（数据）{
如果（数据==1）{
window.location.href=“submitted_project.php？success”；
}否则{
window.location.href=“submitted_project.php？error”；
}
},
cache:false，
contentType:false，
processData:false
});
})

功能进度（百分比，$element）{
var progressBarWidth=percent*$element.width（）/100；
$element.find（'div'）.animate（{width:progressBarWidth}，500）.html（百分比+“%”）；
}

我的HTML代码

   <style>
        #progressBar {
width: 400px;
height: 22px;
border: 1px solid #111;
background-color: #292929;
}
#progressBar div {
height: 100%;
color: #fff;
text-align: right;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #0099ff;
}
        </style>

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

#进度条{
宽度：400px；
高度：22px；
边框：1px实心#111；
背景色：#292929；
}
#进步酒吧部{
身高：100%；
颜色：#fff；
文本对齐：右对齐；
行高：22px；/*如果希望文本中间对齐，则与#进度条高度相同*/
宽度：0；
背景色：#0099ff；
}

最好的办法是

例如：

$.ajax({
  type: 'POST', // GET/POST
  url: "/", // Some URL
  data: {}, // Misc data
  beforeSend: function(XMLHttpRequest) // Do the following before sending the request
  {
    //Upload progress
    XMLHttpRequest.upload.addEventListener("progress", function(event) // Add a "progress" listener.
    {
      if (evt.lengthComputable) 
      {  
        var percentComplete = (event.loaded / event.total) * 100;
        // You can use this data for your progress bar.
      }
    }, false); 
  },
  success: function(data)
  {
  // Here, you can make your progress bar green or something.
  }
});

---

在这里可以找到正确的解决方案：我在运行上述代码时出错。TypeError:XMLHttpRequest.upload未定义您需要先定义它。

$.ajax({
  type: 'POST', // GET/POST
  url: "/", // Some URL
  data: {}, // Misc data
  beforeSend: function(XMLHttpRequest) // Do the following before sending the request
  {
    //Upload progress
    XMLHttpRequest.upload.addEventListener("progress", function(event) // Add a "progress" listener.
    {
      if (evt.lengthComputable) 
      {  
        var percentComplete = (event.loaded / event.total) * 100;
        // You can use this data for your progress bar.
      }
    }, false); 
  },
  success: function(data)
  {
  // Here, you can make your progress bar green or something.
  }
});