站长资讯网
最全最丰富的资讯网站

php如何实现进度条

php实现进度条的方法:1、利用“输出缓冲控制”直接输出进度条;2、利用ajax先去请求逻辑处理的地址,然后利用session或者其他存储介质保存处理进度。

php如何实现进度条

推荐:《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被锁而一直等待,使用完就释放是最好的

赞(0)
分享到: 更多 (0)
网站地图   沪ICP备18035694号-2    沪公网安备31011702889846号