這篇文章給大家分享的是有關php如何實現進度條效果的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
php實現進度條的方法是：1、利用ajax請求邏輯處理的地址；2、在邏輯處理過程中，利用session保存處理進度；3、用ajax去請求另一個查詢進度的地址，從而實現實時反饋。
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被鎖而一直等待，使用完就釋放是最好的。
感謝各位的閱讀！關于php如何實現進度條效果就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
