PHPでプログレスバーを実装する方法
- 藏色散人オリジナル
- 2020-09-01 10:19:383175ブラウズ
php でプログレス バーを実装する方法: 1. 「出力バッファ コントロール」を使用してプログレス バーを直接出力します; 2. ajax を使用して最初に論理処理アドレスを要求し、次にセッションまたは他のストレージ メディアを使用します。処理の進行状況を保存します。
PHP ビデオ チュートリアル#」 ##》#PHP でプログレスバーを実装するには主に 2 つの方法があり、1 つは「出力バッファー制御」を使用してプログレスバーを直接出力する方法、もう 1 つは 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 を使用して最初にリクエストします (非同期リクエストが望ましい) 「論理処理」のアドレス 論理処理中に、セッションまたは他の記憶媒体 (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.
以上がPHPでプログレスバーを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。