dev.azki.org

웹에서 파일 업로드시에 프로그레스 모니터 (흔히 ProgressBar 형태로 많이 쓰죠) 구현에 대한 글 입니다

짧은 지식과 소견으로 이루어진 글이므로, 틀리거나 이후 시대가 변해 달라진 내용이 많을 것 입니다 :]

많은 분들께 도움이 되길 바랍니다만 출처를 포함하지 않은 불펌은 자제해주시기를 -ㅁ-zz


이전에 프로그레스 바를 구현하기 위해서는 웹브라우저 자체로만은 힘들었고 (제가 아는한, 제대로 구현된 경우가 별로 없었고) ActiveX 를 설치해야 되는 경우가 많았지요

하지만 Ajax 시대가 초래됨에 따라 -.- activeX 사용을 자제하기 시작했지요

아무튼 유명 포탈사이트 플러그인도 깔기 싫은 (워낙 스파이웨어 이딴 것들이 판을 쳐서요) 시대라서 다른 방법을 생각하게 된거 같습니다


뭔가 잡담이길어지네요 . . . . 본론을 쓰겠습니다 :]


일단 많이 쓰는 방식으로
어도비 플래시(adobe flash)를 이용한 방법이 있습니다
플래시8부터 업로드 컴포넌트를 지원한다고 들은거 같습니다
제가 쓰는 텍스트큐브(태터툴즈)도 파일을 업로드할 때 플래시를 이용하네요
사실 플래시도 activeX 의 종류이긴하나 정말로.. activeX 가 아닌 것 처럼 쓰이고 있기때문에..
특별하지 않은 경우에는 문제가 되지 않죠
서버 세팅이 특별하게 필요하지 않아서 호스팅 받는 개인이 쓰기에 편한 방법이기도 합니다
현재는 순수한 JS와 HTML로 불가능한 다중선택 파일 선택 다이얼로그가 가능하고, 업로드 전에 파일 사이즈도 알아낼 수 있습니다.
제가 생각하기엔 특별한 경우가 아닌 이상 제일 괜찮은 방법이라고 생각합니다..
업로드 데모와 프로그램은 http://swfupload.mammon.se/ 를 보세요 =_=


그리고, AJAX를 이용한 방법이 있습니다
확실히 플래시에 비해 약하지만 진정한 non-download (no activeX) 이므로, 쓸데없다고 할 수는 없겠죠.
ASP, JSP, PHP 모두 가능합니다
ASP는 확인을 해보지 못했으나 된다하고, JSP와 PHP는 실제 코드를 작성하여 확인을 해보았습니다.

그 중 PHP 를 이용하는 방법을 소개하겠습니다
APC(Alternative PHP Cache) 모듈을사용하는 방법이 있습니다
다운로드는 http://pecl.php.net/package/APC/ 를 이용하시면 됩니다
윈도우 환경에서 Apache2 + PHP5 를 이용하시면 http://www.php.net/downloads.php 에서 버전에 맞는 PECL Win32 binaries 찾아서 받아 쓰면 됩니다
윈도우 환경 기준으로 설명드리면
extension_dir 을 설정하시고,

그 디렉토리에 php_apc.dll 파일을 복사하고 (다른 dll은 안넣으셔도 됩니다) 아래와 같이 설정합니다

Apache를 재시작하면 작동합니다

rfc1867 라는 옵션이 바로 그 기능(프로그레스-바를 만들 수 있는 기능)을 하는 옵션입니다
자세한 기능은 이곳을 참고하세요 http://www.php.net/manual/en/ref.apc.php
관련된 기능에 대한 간략한 설명.
apc.rfc1867
"0" 이면 사용하지 않는 것이고 "1"은 사용
apc.rfc1867_prefix
apc_fetch 로 뽑아올 때 사용할 키의 앞부분이죠 기본값은 "upload_"
apc.rfc1867_name
업 로드시에 파일 식별자를 넣어줄 파라메터의 이름 입니다. 이는 input 태그를 사용해서 넣어주고요. 보통 hidden 속성을 적용하여 사용합니다(type='hidden'). 값은 보통 Javascript 서 Math.random() 등으로 넣어주고요. 나중에 프로그레스 상태를 받을 요청을 할 때 사용합니다. 기본값은 "APC_UPLOAD_PROGRESS" 입니다.
apc.rfc1867_freq
"The frequency that updates should be made to the user cache entry for upload progress." 라는군요..

아무튼 사용법은 간단합니다
업로드하는 폼에 hidden 타입의 input을 하나 더 추가해서 apc.rfc1867_name 값을 이름으로 합니다 (기본값은 APC_UPLOAD_PROGRESS 입니다.)
간단하게 코드로 표현하면 이렇습니다

name이 APC_UPLOAD_PROGRESS 인 input 의 value가 키가 됩니다 (임의로 TEST123을 넣었습니다, 랜덤값등을 생성하여 넣는 편이 좋겠지요)
action에 해당하는 PHP 파일에서는 프로그레스 모니터를 위해 따로 작업할 필요가 없습니다
다른 PHP 파일에서 아래와 같이 키값을 이용해서 현재의 업로드 상태를 가져올 수 있습니다
결과값은 다음과 같습니다 (파일 업로드가 진행중일 경우)
감이 오시겠지만 'total' 과 'current' 를 이용해서 프로그레스를 나타낼 수 있습니다. 'start_time' 도 쓸만하겠군요. 더 응용하면 업로드 속도까지 나타낼 수 있겠군요

AJAX를 이용해서 실시간으로 이를 나타낼려면 form의 target을 숨겨진 iframe으로 하고 submit 후에 (페이지가 바뀌지않게) ajax 통신을 시작해서 정보를 가져와야겠지요

차후 이 AJAX 코드에 관해서는 다시 예제와 함께 글을 올릴 생각입니다 ^^;