PHPでプログレスバーを実装する方法は何ですか
php でプログレスバーを実装する方法は次のとおりです: 1. ajax を使用して論理処理のアドレスを要求します; 2. 論理処理中に、セッションを使用して処理の進行状況を保存します; 3. ajax を使用します進捗状況を問い合わせるために別のアドレスを要求することで、リアルタイムのフィードバックを実現します。
phpでプログレスバーを実装するには主に2つの方法があり、1つは「出力バッファコントロール」を使用してプログレスバーを直接出力する方法、もう1つはプログレスバーを直接出力する方法です。 ajaxメソッドです。
(学習ビデオの推奨: java コース)
最初に、「出力バッファ制御」方法について説明します。
この方法では、主にいくつかの関数を使用します。 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でプログレスバーを実装する方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7324
9
1625
14
1350
46
1262
25
1209
29
Ubuntu および Debian 用の PHP 8.4 インストールおよびアップグレード ガイド
Dec 24, 2024 pm 04:42 PM
PHP 8.4 では、いくつかの新機能、セキュリティの改善、パフォーマンスの改善が行われ、かなりの量の機能の非推奨と削除が行われています。 このガイドでは、Ubuntu、Debian、またはその派生版に PHP 8.4 をインストールする方法、または PHP 8.4 にアップグレードする方法について説明します。
CakePHP ファイルのアップロード
Sep 10, 2024 pm 05:27 PM
ファイルのアップロードを行うには、フォーム ヘルパーを使用します。ここではファイルアップロードの例を示します。
CakePHP について話し合う
Sep 10, 2024 pm 05:28 PM
CakePHP は、PHP 用のオープンソース フレームワークです。これは、アプリケーションの開発、展開、保守をより簡単にすることを目的としています。 CakePHP は、強力かつ理解しやすい MVC のようなアーキテクチャに基づいています。モデル、ビュー、コントローラー
PHP 開発用に Visual Studio Code (VS Code) をセットアップする方法
Dec 20, 2024 am 11:31 AM
Visual Studio Code (VS Code とも呼ばれる) は、すべての主要なオペレーティング システムで利用できる無料のソース コード エディター (統合開発環境 (IDE)) です。 多くのプログラミング言語の拡張機能の大規模なコレクションを備えた VS Code は、
