我想要一个jQuery进度栏,该进度栏会根据服务器端请求的状态进行更新。我基于本教程编写此代码,但它使用文件上传器作为基础(与此问题相同)。没有文件上传器,我无法使其工作完全相同。问题是进度条仅在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 } } ?>
AFAIK,PHP会话实际上是同步的。这意味着在会话完成Process.php之前,Process.php脚本将阻止getProgress.php脚本运行。
所以发生的是:
参见http://www.php.net/manual/zh/function.session-write- close.php。
会话数据通常在脚本终止后存储,而无需调用session_write_close(),但是由于会话数据被锁定以防止并发写入,因此任何时候任何会话都只能对一个脚本进行操作。[…]
由于目前无法访问服务器,因此我尚未测试以下代码,但我想类似的东西应该可以工作:
<?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); } ?>