我想要一个基于服务器端请求状态更新的 jQuery 进度条。我将此代码基于 this tutorial但它使用文件 uploader 作为基础(与 this 问题相同)。没有文件 uploader ,我无法让它正常工作。问题是进度条只在 process.php 完成后更新。它不是异步请求进度更新,而是等待整个过程完成。我只看到数据:数据警报一次。
有什么想法吗?
网页:
<form id="upload-form" action='process.php' method="post" target="upload-frame">
<input type="hidden" id="uid" name="UPLOAD_IDENTIFIER" value="<?php echo $uid; ?>" >
<input type="submit" value="Submit" />
</form>
<div id="progressbar"></div>
<iframe id="upload-frame" name="upload-frame" style="display:none"></iframe>
Process.php - 提交表单时调用
<?php
session_start();
$varArray=array(1,2,3,4);
$_SESSION['total']=count($varArray);
foreach($varArray as $val){
$_SESSION['current']=$val;
sleep(2);
}
?>
JavaScript
$(document).ready(function() {
var started = false;// This flag determines if the upload has started
$(function() {
// Start progress tracking when the form is submitted
$('#upload-form').submit(function() {
$('#progressbar').progressbar();// Initialize the jQuery UI plugin
// We know the upload is complete when the frame loads
$('#upload-frame').load(function() {
// This is to prevent infinite loop
// in case the upload is too fast
started = true;
// Do whatever you want when upload is complete
alert('Upload Complete!');
});
// Start updating progress after a 1 second delay
setTimeout(function() {
// We pass the upload identifier to our function
updateProgress($('#uid').val());
}, 1000);
});
});
function updateProgress(id) {
var time = new Date().getTime();
// Make a GET request to the server
// Pass our upload identifier as a parameter
// Also pass current time to prevent caching
$.ajax({
url: 'getProgress.php',
type: "GET",
cache: false,
data: {'uid':id},
dataType: 'text',
success: function(data){
alert("data: " + data);
var progress = parseInt(data, 10);
if (progress < 100 || !started) {
// Determine if upload has started
started = progress < 100;
// If we aren't done or started, update again
updateProgress(id);
}
// Update the progress bar percentage
// But only if we have started
started && $('#progressbar').progressbar('value', progress);
}
});
}
}(jQuery));
getProgress.php - 由 ajax 请求调用:
<?php
session_start();
if (isset($_REQUEST['uid'])) {
if (isset($_SESSION['total']) && isset($_SESSION['current'])) {
// Fetch the upload progress data
$total = $_SESSION['total'];
$current = $_SESSION['current'];
// Calculate the current percentage
$percent_done = round($current/$total*100);
echo $percent_done;
}else{
echo 100;// If there is no data, assume it's done
}
}
?>
最佳答案
据我所知,PHP session 实际上是同步的。这意味着 Process.php 脚本会阻止 getProgress.php 脚本运行,直到 Process.php 完成 session 。
那么发生的事情是:
- Process.php启动并调用session_start()
- 服务器将 session 控制交给session_start()
- getProcess.php 启动并调用session_start()
- 服务器阻塞 getProcess.php 直到 session 未被使用。
- Process.php 完成并关闭 session 。
- 服务器恢复 getProcess.php 并赋予它对 session 的控制权。
- getProcess.php 现在可以看到进程已完成。
参见 http://www.php.net/manual/en/function.session-write-close.php .
Session data is usually stored after your script terminated without the need to call session_write_close(), but as session data is locked to prevent concurrent writes only one script may operate on a session at any time. [...]
我还没有测试以下代码,因为我目前无法访问服务器,但我想它应该可以工作:
<?php
$varArray=array(1,2,3,4);
session_start();
$_SESSION['total']=count($varArray);
session_write_close ();
foreach($varArray as $val){
session_start();
$_SESSION['current']=$val;
session_write_close ();
sleep(2);
}
?>
关于php - jquery progressbar - 一次加载所有,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6913426/