세션과 자바스크립트를 사용하여 PHP_php 팁에서 파일 업로드 진행률 표시줄 기능 구현

웹 애플리케이션은 파일 업로드 기능을 제공해야 하는 경우가 많습니다. 일반적인 시나리오에는 사용자 아바타 업로드, 앨범 사진 업로드 등이 포함됩니다. 업로드할 파일이 상대적으로 큰 경우 업로드 진행 상황을 보여주는 진행 표시줄을 제공해야 합니다.

PHP 5.4 이전에는 이러한 진행률 표시줄을 구현하는 것이 쉽지 않았습니다.

1. 플래시, 자바, ActiveX를 사용하세요
2. PHP의 APC 확장 기능 사용
3. HTML5 파일 API 사용

첫 번째 방법은 제3자 브라우저 플러그인을 사용하는 방식인데, 이는 다목적성이 부족하고 쉽게 보안 위험을 초래할 수 있습니다. 그러나 Flash의 광범위한 사용으로 인해 여전히 Flash를 솔루션으로 사용하는 웹사이트가 많이 있습니다.

두 번째 방법의 단점은 PHP의 APC 확장 라이브러리를 설치해야 하고 사용자가 서버측 구성을 제어해야 한다는 것입니다. 게다가 단지 업로드 진행률 표시줄을 구현하기 위해 APC를 설치한다면 분명히 약간 과잉입니다.

세 번째 방법은 서버 측 지원이 필요하지 않고 브라우저 측에서만 Javascript를 사용하는 가장 이상적인 방법입니다. 하지만 아직 HTML5 표준이 정립되지 않았고, 브라우저 제조사마다 지원하는 방식이 다르기 때문에 이 방법은 아직 대중화되기에는 어렵습니다.

PHP 5.4에 도입된 세션 기반 업로드 진행 모니터링 기능(session.upload_progress)은 서버측 업로드 진행 모니터링 솔루션을 제공합니다. PHP 5.4로 업그레이드한 후에는 APC 확장을 설치할 필요가 없습니다. 기본 PHP 및 프런트엔드 Javascript만 사용하여 업로드 진행률 표시줄을 구현할 수 있습니다.

PHP 5.4의 새로운 기능 session.upload_progress를 자세히 소개하겠습니다.

원리소개

브라우저가 서버에 파일을 업로드하면 PHP는 파일 업로드에 대한 자세한 정보(예: 업로드 시간, 업로드 진행률 등)를 세션에 저장합니다. 그런 다음 업로드가 진행됨에 따라 세션의 정보가 주기적으로 업데이트됩니다. 이러한 방식으로 브라우저는 Ajax를 사용하여 주기적으로 서버 측 스크립트를 요청할 수 있으며 스크립트는 세션에서 진행률 정보를 반환합니다. 브라우저 측 Javascript는 이 정보를 기반으로 진행률 표시줄을 표시/업데이트할 수 있습니다.

그럼 파일 업로드 정보는 어떻게 저장되나요? 어떻게 접근하나요? 아래에서 자세히 설명드리겠습니다.

PHP 5.4에는 일부 구성 항목이 도입되었습니다(php.ini에서 설정)

코드 복사 코드는 다음과 같습니다.

session.upload_progress.enabled = "1"
session.upload_progress.cleanup = "1"
session.upload_progress.prefix = "upload_progress_"
session.upload_progress.name = "PHP_SESSION_UPLOAD_PROGRESS"
session.upload_progress.freq = "1%"
session.upload_progress.min_freq = "1"

Enabled는 기본적으로 켜져 있는 upload_progress 기능을 켤지 여부를 제어하며, 정리는 기본적으로 켜져 있는 파일 업로드 요청이 제출된 후 세션 관련 정보를 지울지 여부를 설정합니다.

접두사와 이름은 세션에서 진행 정보가 저장되는 변수 이름/키 이름을 설정하는 데 사용됩니다. 이 두 항목의 자세한 사용법은 아래를 참조하세요.

freq 및 min_freq는 서버 측에서 진행 정보 업데이트 빈도를 설정하는 데 사용됩니다. 이 두 항목을 적절하게 설정하면 서버의 부하를 줄일 수 있습니다.

파일 업로드 양식에서 이 업로드에 대한 식별자를 설정하고 이 식별자를 사용하여 후속 프로세스에서 진행 정보를 참조해야 합니다. 특히, 업로드 양식에는 숨겨진 입력이 있어야 하며, 해당 이름 속성은 php.ini의 session.upload_progress.name 값이며 해당 값은 사용자가 정의한 식별자입니다. 다음과 같습니다:

코드 복사 코드는 다음과 같습니다.

<입력 유형="숨김"
name=""
value="test" />

파일 업로드 양식을 받은 후 PHP는 $_SESSION 변수에 새 키를 생성합니다. 키 이름은 session.upload_progress.prefix 값을 위의 사용자 정의 식별자와 연결하여 얻은 문자열입니다. :

코드 복사 코드는 다음과 같습니다.

$name = ini_get('session.upload_progress.name');
$key = ini_get('session.upload_progress.prefix') $_POST[$name];

$_SESSION[$key]; // 파일 업로드 진행 정보입니다

$_SESSION[$key] 변수의 구조는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$_SESSION["upload_progress_test"] = 배열(
"start_time" => 1234567890, // 시작 시간
"content_length" => 57343257, //POST 요청의 총 데이터 길이
"bytes_processed" => 453489, //받은 데이터 길이
"Done" = & gt; false, // 요청 완료 여부, False가 완료되지 않음

// 단일 파일에 대한 정보
"파일" => 배열(
0 => 배열( ... ),
// 동일한 요청에 여러 파일이 포함될 수 있습니다
1 => 배열( ... ),
)
);

이런 방식으로 content_length와 bytes_processed 두 항목을 사용하여 진행률을 얻을 수 있습니다.

프로그램 예시

이제 원리를 소개했으니 PHP와 Javascript를 기반으로 파일 업로드 진행 표시줄을 완벽하게 구현해 보겠습니다.

양식 업로드

먼저 업로드 양식 페이지 index.php를 작성해 보겠습니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

action="upload.php" method="POST" enctype="multipart/form-data"
스타일="margin:15px 0" target="hidden_iframe">

           
~     ~              

            

~ ~

폼에 숨겨진 항목인 session.upload_progress.name에 주목하세요. 값이 test로 설정되어 있습니다. 양식에는 파일 업로드 입력이 하나만 있으며 필요한 경우 여러 개를 추가할 수 있습니다.

여기서 양식의 대상 속성에 특별한 주의가 필요합니다. 여기 설정은 현재 페이지의 iframe을 가리킵니다. 이는 target 속성을 설정함으로써 양식이 제출된 후의 페이지가 iframe에 표시되므로 현재 페이지 이동을 방지하는 데 중요합니다. 현재 페이지에 진행률 표시줄을 표시해야 하기 때문입니다.

#progress 이 div는 진행률 표시줄을 표시하는 데 사용됩니다.

참고: index.php 시작 부분에 session_start()를 추가하는 것을 잊지 마세요.

업로드된 파일 처리

양식의 동작은 upload.php를 가리킵니다. upload.php에서 업로드된 파일을 처리하고 현재 디렉터리로 전송합니다. 여기서는 일반적인 업로드 처리와 차이가 없습니다.

코드 복사 코드는 다음과 같습니다. if(is_uploaded_file($_FILES['file1']['tmp_name'])){

         move_uploaded_file($_FILES['file1']['tmp_name'], "./{$_FILES['file1']['name']}");

}
?>

진행 정보를 얻는 Ajax

이 단계가 핵심입니다. 세션에서 진행 정보를 읽기 위해 Progress.php 파일을 생성한 다음 index.php에 Javascript 코드를 추가하고 Progress.php에 대한 Ajax 요청을 시작한 다음 이를 기반으로 합니다. 획득된 진행 정보는 진행 표시줄을 업데이트합니다.

progress.php의 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. session_start();

$i = ini_get('session.upload_progress.name');
$key = ini_get("session.upload_progress.prefix") $_GET[$i];

if (!empty($_SESSION[$key])) {

          $current = $_SESSION[$key]["bytes_processed"];

         $total = $_SESSION[$key]["content_length"];

echo $current < $total ? ceil($current / $total * 100) : 100;
}그밖에{
에코 100;
}
?>


여기서는 $_SESSION 변수에서 진행률 정보를 얻은 다음 진행률을 출력합니다.

index.php에서 페이지 하단에 다음 코드를 추가합니다(단순화를 위해 여기에서는 jQuery가 사용됨).

코드 복사 코드는 다음과 같습니다.

함수 fetch_progress(){
           $.get('progress.php',{ '' : 'test'}, function(data){
              var 진행률 =parseInt(data);

$('#progress .label').html(진행률 '%');
                     $('#progress .bar').css('width', 진행률 '%');

if(진행률 < 100){
                             setTimeout('fetch_progress()', 100);
                     }else{
                 $('#progress .label').html('완료!');
}
         }, 'html');
}

$('#upload-form').submit(function(){
          $('#progress').show();
​​​​ setTimeout('fetch_progress()', 100);
});

#upload-form이 제출되면 진행률 표시줄이 표시되고, 진행률 정보를 얻기 위해 fetch_progress()를 반복적으로 호출하고, 파일이 업로드되고 'Complete!'가 표시될 때까지 진행률 표시줄을 업데이트합니다.

완료!

전체 코드 다운로드: http://xiazai.jb51.net/201410/tools/samples-master.rar

메모

입력태그 위치

session.upload_progress.name이라는 입력 태그는 파일 입력 앞에 배치되어야 합니다.

업로드 취소

$_SESSION[$key]['cancel_upload'] = true로 설정하면 현재 업로드를 취소할 수 있습니다. 단, 업로드 중인 파일과 아직 시작되지 않은 파일만 취소할 수 있습니다. 성공적으로 업로드된 파일은 삭제되지 않습니다.

setTimeout과 setInterval 비교

다음 요청을 시작하기 전에 한 요청이 반환되는지 확인하려면 setTimeout()을 통해 fetch_progress()를 호출해야 합니다. setInterval()을 사용하면 이를 보장할 수 없으며 진행률 표시줄이 '앞으로가 아니라 뒤로' 표시될 수 있습니다.