PHP에서 진행률 표시줄을 구현하는 방법은 무엇입니까
- 王林원래의
- 2020-11-06 15:09:432702검색
PHP가 진행률 표시줄을 구현하는 방식은 다음과 같습니다. 1. ajax를 사용하여 논리적 처리 주소를 요청합니다. 2. 논리적 처리 중에 세션을 사용하여 처리 진행 상황을 저장합니다. 3. ajax를 사용하여 쿼리할 다른 주소를 요청합니다. 진행을 통해 실시간 피드백을 얻을 수 있습니다.
PHP에서 진행률 표시줄을 구현하는 방법에는 크게 두 가지가 있습니다. 하나는 "출력 버퍼 제어"를 사용하여 진행률 표시줄을 직접 출력하는 방법이고, 다른 하나는 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. setTimeout을 사용하는 이유는 설정하면 시간이 너무 짧고 요청 응답 시간이 너무 길면 디스플레이 혼란이 발생하기 때문입니다.
2. 세션을 사용한 후에는 시간 내에 해제하도록 주의하세요. 그렇지 않으면 세션이 잠겨 있으므로 쿼리가 대기하게 됩니다. 사용 후 해제하는 것이 가장 좋습니다.
관련 권장 사항: php training
위 내용은 PHP에서 진행률 표시줄을 구현하는 방법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.