php如何实现进度条效果

发布时间：2020-11-09 10:08:17 作者：小新
来源：亿速云阅读：282

这篇文章给大家分享的是有关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如何实现进度条效果就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！

php如何实现进度条效果

相关阅读