> 백엔드 개발 > PHP 문제 > PHP에서 진행률 표시줄을 구현하는 방법

PHP에서 진행률 표시줄을 구현하는 방법

PHPz
풀어 주다: 2023-04-19 10:36:09
원래의
1739명이 탐색했습니다.

인터넷 애플리케이션의 지속적인 발전으로 인해 웹 개발은 매우 중요한 분야가 되었습니다. 일반적으로 사용되는 서버 스크립팅 언어인 PHP는 웹 개발에 널리 사용됩니다. 그 중 대용량 데이터 처리, 파일 업로드 및 다운로드 등의 작업에는 필연적으로 진행률 표시줄의 사용이 필요하므로 사용자는 작업 진행 상황을 보다 직관적으로 느낄 수 있습니다. 이 기사에서는 독자가 이 기능을 더 잘 적용할 수 있도록 PHP에서 진행률 표시줄을 구현하는 몇 가지 방법과 기술을 소개합니다.

1. 진행률 표시줄의 AJAX 구현

Ajax는 비동기 통신을 위해 JavaScript 및 XML 기술을 사용하여 전체 페이지를 새로 고치지 않고도 페이지의 일부를 업데이트할 수 있는 응용 프로그램 중 하나입니다. 구체적인 구현 단계는 다음과 같습니다.

  1. 아래와 같이 HTML 페이지에 진행률 표시줄의 html 코드를 추가합니다.
<div id="progressBar">
   <div id="progress"></div>
</div>
로그인 후 복사
로그인 후 복사
  1. Javascript에서 AJAX 요청을 정의하고 진행 정보를 백엔드에 전송합니다. 비동기 통신을 통한 코드. 다음은 간단한 예입니다.
function uploadFile() {
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('progress', function(e) {
        var percent = e.loaded / e.total * 100;
        document.getElementById('progress').style.width = percent + '%';
    }, false);
    xhr.open('POST', 'upload.php');
    xhr.send(formData);
}
로그인 후 복사
  1. 진행 정보를 받은 후 백엔드 코드는 해당 처리 및 작업을 수행하고 처리 결과를 프런트엔드로 반환합니다. 코드는 다음과 같습니다.
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive');

echo "data: {$percent}%\n\n";
flush();
로그인 후 복사

이 방법을 사용하면 대용량 파일을 업로드하거나 다운로드할 때 진행률 표시줄의 진행 상황을 페이지에 실시간으로 표시할 수 있어 사용자가 작업 상태를 보다 명확하게 이해할 수 있습니다.

2. 세션을 사용하여 진행률 표시줄 구현

세션은 사용자 세션 정보를 저장하는 메커니즘입니다. 세션을 사용하여 진행 정보를 저장하고 이를 실시간으로 프런트 엔드 페이지에 전달하여 진행률 표시줄의 상태를 업데이트할 수 있습니다. 구체적인 구현 단계는 다음과 같습니다.

  1. 아래와 같이 HTML 페이지에 진행률 표시줄의 html 코드를 추가합니다.
<div id="progressBar">
   <div id="progress"></div>
</div>
로그인 후 복사
로그인 후 복사
  1. 이를 백엔드 코드에서 처리하고 세션에 진행 정보를 저장합니다. 다음은 간단한 예입니다.
session_start();
for ($i=0; $i<=100; $i++) {
    $_SESSION[&#39;progress&#39;] = $i;
    // 文件处理或上传下载等操作
}
로그인 후 복사
  1. HTML 페이지에서 Javascript를 사용하여 정기적으로 서버에서 진행 정보를 얻고 진행률 표시줄의 상태를 업데이트합니다. 코드는 다음과 같습니다.
setInterval(function() {
   var xhr = new XMLHttpRequest();
   xhr.open(&#39;GET&#39;, &#39;progress.php&#39;);
   xhr.onload = function() {
      var percent = parseInt(xhr.responseText);
      document.getElementById(&#39;progress&#39;).style.width = percent + &#39;%&#39;;
   };
   xhr.send(null);
}, 1000);
로그인 후 복사
  1. 서버 측에서 프런트 엔드 진행률 표시줄 요청에 응답하고 현재 진행률 정보를 반환합니다. 다음은 간단한 예입니다.
session_start();
if (isset($_SESSION[&#39;progress&#39;])) {
    echo $_SESSION[&#39;progress&#39;];
} else {
    echo "0";
}
로그인 후 복사

이 구현 방법은 매우 간단하며 데이터 양이 적을 때 진행률 표시줄의 효과를 아주 잘 얻을 수 있습니다. 그러나 몇 가지 단점도 있습니다. 예를 들어 동시성이 높은 상황에서는 요청이 너무 많아 서버 성능에 영향을 줄 수 있습니다. 이 경우 진행률 표시줄을 구현하기 위해 다른 방법을 고려할 수 있습니다.

3. 진행률 표시줄을 구현하는 타사 라이브러리

또한 진행률 표시줄 기능을 구현하는 데 사용할 수 있는 타사 라이브러리가 많이 있습니다. 이러한 라이브러리 중 일부는 Bootstrap, jQuery, NProgress 등과 같은 무료 오픈 소스입니다. 이를 사용하면 코드 작성의 어려움을 크게 단순화하고 개발 효율성을 향상시킬 수 있습니다.

예를 들어 부트스트랩 라이브러리를 사용하여 진행률 표시줄을 구현하려면 관련 CSS 및 JS 파일을 HTML 페이지에 도입하고 진행률 표시줄의 HTML 코드를 정의하기만 하면 됩니다.

<div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
      <span class="sr-only">60%Complete</span>
   </div>
</div>
로그인 후 복사

이런 식으로 하면 동적 효과 표시줄을 사용하여 진행 표시줄을 구현하고 언제든지 진행 표시줄의 진행률을 제어하기 위해 스타일 속성의 값을 변경할 수 있습니다.

요약

진행률 표시줄은 일반적으로 사용되는 웹 기능으로 대용량 데이터 처리, 파일 업로드 및 다운로드 등에 중요한 역할을 합니다. 이 기사에서는 PHP에서 진행률 표시줄을 구현하는 세 가지 방법인 Ajax, 세션 및 타사 라이브러리를 소개합니다. 각 방법에는 장점과 단점이 있으며 진행률 표시줄을 구현하는 데 적합한 방법을 선택할 수 있습니다. 이 기사가 독자들이 진행률 표시줄 기능을 구현하기 위해 PHP 기술을 더 잘 적용하는 데 도움이 되기를 바랍니다.

위 내용은 PHP에서 진행률 표시줄을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿