站長資訊網php實現進度條的方法：1、利用“輸出緩沖控制”直接輸出進度條；2、利用ajax先去請求邏輯處理的地址，然后利用session或者其他存儲介質保存處理進度。
推薦：《PHP視頻教程》
php實現進度條主要有兩種方式，一種是利用“輸出緩沖控制”直接輸出進度條，還有一種是ajax方式
首先說一下“輸出緩沖控制”方式：
該方式主要利用php的幾個緩沖函數，該方式可以不用更改配置文件，直接運行即可，下面貼出代碼：
<?php set_time_limit(0); //設置程序執行時間 ignore_user_abort(true); //設置斷開連接繼續執行 header('X-Accel-Buffering: no'); //關閉buffer header('Content-type: text/html;charset=utf-8'); //設置網頁編碼 ob_start(); //打開輸出緩沖控制 echo str_repeat(' ',1024*4); //字符填充 $width = 1000; $html = '<div style="margin:100px auto; padding: 8px; border: 1px solid gray; background: #EAEAEA; width: %upx"><div style="padding: 0; background-color: white; border: 1px solid navy; width: %upx"><div id="progress" style="padding: 0; background-color: #FFCC66; border: 0; width: 0px; text-align: center; height: 16px"></div></div><div id="msg" style="font-family: Tahoma; font-size: 9pt;">正在處理...</div><div id="percent" style="position: relative; top: -34px; text-align: center; font-weight: bold; font-size: 8pt">0%%</div></div>'; echo sprintf($html, $width+8, $width); echo ob_get_clean(); //獲取當前緩沖區內容并清除當前的輸出緩沖 flush(); //刷新緩沖區的內容，輸出 $length = 11; for($i=0; $i<$length; $i++) { sleep(rand(1,2)); $proportion = ($i+1)/$length; if($i+1 == $length){ $msg = '同步完成'; }else{ $msg = '正在同步第' . ($i+1) . '個用戶'; } $script = '<script>document.getElementById("percent").innerText="%u%%";document.getElementById("progress").style.width="%upx";document.getElementById("msg").innerText="%s";</script>'; echo sprintf($script, intval($proportion*100), intval(($i+1)/$length)*$width, $msg); echo ob_get_clean(); //獲取當前緩沖區內容并清除當前的輸出緩沖 flush(); //刷新緩沖區的內容，輸出 }
注：該進度條樣式是從網上找的，稍微修改了下，你可以替換成自己想要的樣式
“ajax方式”則稍微麻煩點，該方法的邏輯是利用ajax先去請求（最好是異步請求）”邏輯處理”的地址,邏輯處理過程中利用session或者其他存儲介質（比如memcache,redis等）保存處理進度，在用ajax去請求（最好是同步請求）另一個查詢進度的地址，實現實時反饋
下面貼出代碼：
首先是html文件
<!DOCTYPE html><html><head><meta charset="UTF-8"><script type="text/javascript" src="./jquery-1.10.2.min.js"></script><title>同步</title></head><body> <input type="button" name="syn" id="syn" value="同步" /> <div id="progressBar" style="margin: 50px auto; padding: 8px; border: 1px solid gray; background: #EAEAEA; width: 1008px;display:none"> <div style="padding: 0; background-color: white; border: 1px solid navy; width: 1000px"> <div id="progress" style="padding: 0; background-color: #FFCC66; border: 0; width: 0px; text-align: center; height: 16px"></div> </div> <div id="msg">正在處理...</div> <div id="percent" style="position: relative; top: -18px; text-align: center; font-weight: bold; font-size: 8pt">0%</div> </div></body><script>function query(timestamp){ $.ajax({ type:'post', url:'/test1.php', //查詢進度 data:{ timestamp:timestamp}, dataType: "json", async:false, success: function(data){ if(data.code=='10000'){ data1 = data.data; document.getElementById("percent").innerText= data1.percent + "%"; document.getElementById("progress").style.width=data1.progress + "px"; document.getElementById("msg").innerText=data1.msg; if(data1.percent == 100){ $("#syn").attr('disabled', false); return ; } }else{ document.getElementById("msg").innerText=data.msg; } setTimeout('query(' + timestamp + ')', 1000); } }); } $("#syn").click(function(){ var timestamp = Date.parse(new Date()); $("#syn").attr('disabled', 'disabled'); $("#progressBar").css('display', 'block'); $.ajax({ type:'post', url:'/test.php', //執行處理 data:{ timestamp:timestamp}, dataType: "json", async:true, success: function(data){ if(data.code=='10000'){ console.log('同步成功'); //data1 = data.data; //document.getElementById("percent").innerText= data1.percent + "%"; //document.getElementById("progress").style.width=data1.progress + "px"; //document.getElementById("msg").innerText=data1.msg; }else{ document.getElementById("msg").innerText=data1.msg; } } }); setTimeout('query(' + timestamp + ')', 1000); });</script></html>
test.php <?php set_time_limit(0); //設置程序執行時間 ignore_user_abort(true); //設置斷開連接繼續執行 $timestamp = $_POST['timestamp']; //省略一切校驗 $width = 1000; $length = 11; for($i=0; $i<$length; $i++) { sleep(rand(1,2)); //模擬處理時間 $proportion = ($i+1)/$length; if($i+1 == $length){ $msg = '同步完成'; }else{ $msg = '正在同步第' . ($i+1) . '個用戶'; } $data = array( 'percent' => intval($proportion*100), 'progress' => intval($width*($i+1)/$length), 'msg' => $msg ); session_start(); $_SESSION['now_percent' . $timestamp] = $data; session_write_close(); //釋放session鎖 } echo json_encode(array( 'code' => 10000, 'data' => $data ));
test1.php <?php //忽略所有校驗，直接寫主要部分 $timestamp = $_POST['timestamp']; //省略一切校驗 session_start(); $now_percent = @$_SESSION['now_percent' . $timestamp]; session_write_close(); if(empty($now_percent)){ echo json_encode(array( 'code' => 10001, 'msg' => '正在處理...' ));exit; }else{ echo json_encode(array( 'code' => 10000, 'data' => $now_percent ));exit; }
注：1、之所以未用setinterval定時去查而用setTimeout是因為如果設置的時間過短，而請求響應時間過長就會出現顯示混亂
2、使用session后要注意及時釋放，不然查詢時會因為session被鎖而一直等待，使用完就釋放是最好的
