首頁 > 後端開發 > PHP問題 > php如何實作進度條

php如何實作進度條

藏色散人
發布: 2023-03-05 15:00:01
原創
3152 人瀏覽過

php實作進度條的方法:1.利用「輸出緩衝控制」直接輸出進度條;2、利用ajax先去請求邏輯處理的位址,再利用session或是其他儲存媒體保存處理進度。

php如何實作進度條

#推薦:《PHP視頻教學

php實作進度條主要有兩種方式,一種是利用「輸出緩衝控制」直接輸出進度條,還有一種是ajax方式

先說一下「輸出緩衝控制」方式:

該方式主要利用php的幾個緩衝函數,該方式可以不用更改配置文件,直接運行即可,下面貼出代碼:

<?php
set_time_limit(0);  //设置程序执行时间
ignore_user_abort(true);    //设置断开连接继续执行
header(&#39;X-Accel-Buffering: no&#39;);    //关闭buffer
header(&#39;Content-type: text/html;charset=utf-8&#39;);    //设置网页编码
ob_start(); //打开输出缓冲控制
echo str_repeat(&#39; &#39;,1024*4);    //字符填充
$width = 1000;
$html = &#39;<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>&#39;;
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 = &#39;同步完成&#39;;
    }else{
        $msg = &#39;正在同步第&#39; . ($i+1) . &#39;个用户&#39;;
    }
    $script = &#39;<script>document.getElementById("percent").innerText="%u%%";document.getElementById("progress").style.width="%upx";document.getElementById("msg").innerText="%s";</script>&#39;;
    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:&#39;post&#39;,
        url:&#39;/test1.php&#39;,   //查询进度
        data:{ timestamp:timestamp},
        dataType: "json",
        async:false,
        success: function(data){
            if(data.code==&#39;10000&#39;){
                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(&#39;disabled&#39;, false);                    return ;
                }
            }else{
                document.getElementById("msg").innerText=data.msg;
            }
            setTimeout(&#39;query(&#39; + timestamp + &#39;)&#39;, 1000);
        }
    });
}
$("#syn").click(function(){
    var timestamp = Date.parse(new Date());
    $("#syn").attr(&#39;disabled&#39;, &#39;disabled&#39;);
    $("#progressBar").css(&#39;display&#39;, &#39;block&#39;);
     $.ajax({
        type:&#39;post&#39;,
        url:&#39;/test.php&#39;,    //执行处理
        data:{ timestamp:timestamp},
        dataType: "json",
        async:true,
        success: function(data){
            if(data.code==&#39;10000&#39;){
                console.log(&#39;同步成功&#39;);                //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(&#39;query(&#39; + timestamp + &#39;)&#39;, 1000);
});</script></html>
登入後複製
test.php
<?php
set_time_limit(0);  //设置程序执行时间
ignore_user_abort(true);    //设置断开连接继续执行
$timestamp = $_POST[&#39;timestamp&#39;];   //省略一切校验
$width = 1000;
$length = 11;
for($i=0; $i<$length; $i++) {
    sleep(rand(1,2));    //模拟处理时间
    $proportion = ($i+1)/$length;
    if($i+1 == $length){
        $msg = &#39;同步完成&#39;;
    }else{
        $msg = &#39;正在同步第&#39; . ($i+1) . &#39;个用户&#39;;
    }
    $data = array(
        &#39;percent&#39; => intval($proportion*100),
        &#39;progress&#39; => intval($width*($i+1)/$length),
        &#39;msg&#39; => $msg
    );
    session_start();
    $_SESSION[&#39;now_percent&#39; . $timestamp] = $data;
    session_write_close();  //释放session锁
}
echo json_encode(array(
    &#39;code&#39; => 10000,
    &#39;data&#39; => $data
));
登入後複製
test1.php
<?php
//忽略所有校验,直接写主要部分
$timestamp = $_POST[&#39;timestamp&#39;];   //省略一切校验
session_start();
$now_percent = @$_SESSION[&#39;now_percent&#39; . $timestamp];
session_write_close();
if(empty($now_percent)){
    echo json_encode(array(
        &#39;code&#39; => 10001,
        &#39;msg&#39; => &#39;正在处理...&#39;
    ));exit;
}else{
    echo json_encode(array(
        &#39;code&#39; => 10000,
        &#39;data&#39; => $now_percent
    ));exit;
}
登入後複製

註:1、之所以未用setinterval定時去查而用setTimeout是因為如果設定的時間過短,而請求回應時間過長就會出現顯示混亂
2、使用session後要注意及時釋放,不然查詢時會因為session被鎖而一直等待,使用完就釋放是最好的

以上是php如何實作進度條的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板