我已经尝试基于来自服务器端 (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
});
})
<script>
function progress(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find('div').animate({ width: progressBarWidth },500).html(percent + "% ");
}
</script>
我的 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>
最佳答案
好的方法是 listen to the "progress" event listener .
例子:
$.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.
}
});
关于php - 如何实现基于ajax响应的进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30002884/