[PHP] flash, activex 없이 파일업로드 상태바 보여주기

서버설정

by fsteam 2014. 8. 25. 16:57

파일 업로드에 대한 진행 상태바를 보여주기 위해서는 기존에 activeX 또는 flash를 이용하였다.

하지만.. 브라우저에 따라서 activeX나 flash를 사용하지 못하는 경우도 있고, html5로 가면서 클라이언트에 뭔가를 설치하지 않는것이

대세이기 때문에 html, javascript 만으로 다운로드 상태를 보여주는 상태바를 만들어 보았다.

참고한 URL은 http://www.johnboyproductions.com/php-upload-progress-bar/ 이며 여기에서 데모를 테스트 해볼 수 있다.

php와 javascript를 통한 업로드 진행 상태바를 보여주기 위해서는 아래와 같은 조건이 필요하다.

1. php 버전 5.2 이상

2. apc 설치 및 활성화

여기에서 내가 사용한 웹언어는 php 이며.. php 5.3.3 버전이다.

# php -version

PHP 5.3.3 (cli) (built: Aug 6 2014 05:54:27)

OS 버전은 centOS 6.5 버전이다.

# cat /etc/redhat-release

CentOS release 6.5 (Final)

apc 는 아래와 같은 순서로 설치하였다. 설치 후 아래 맨 아래줄과 같이 웹서버를 재시작 해주어야 반영된다.

# yum install gcc

# yum install php-pear

# yum install php-devel

# yum install httpd-devel

# yum install pcre-devel - 컴파일시 에러가 나서 추가로 설치했다

# pecl install apc

# echo "extension=apc.so" > /etc/php.d/apc.ini

# echo "apc.rfc1867 = on" > /etc/php.ini - 반드시 추가해줘야 한다.

# /etc/init.d/httpd restart

cc나 gcc가 설치되어 있다면.. 위의 첫 줄은 의미 없다. (난 리눅스 minimal 버전이라.. gcc 가 없으서 설치했다)

pecl install apc 명령에서는.. 디버그할거냐.. 뭐냐.. 여러가지 묻는데 디폴트값으로 그냥 엔터엔터 쳐서 넘기면 된다.

설치 후 소스는 아래와 같이 두개의 파일을 작성하면 된다.

1. upload.php

파일 업로드 폼을 보여주고 진행상태를 보여주는 파일

<?php

//get unique id

$up_id = uniqid();

<?php

//process the forms and upload the files

if ($_POST) {

// 업로드 파일이 저장될 경로.. 본인의 환경에 맞게 변경한다. 퍼미션 777 주는것도 잊지 말자.

$folder = "up/";

//specify redirect URL

$redirect = "upload.php?success";

//upload the file

move_uploaded_file($_FILES["file"]["tmp_name"], "$folder" . $_FILES["file"]["name"]);

//do whatever else needs to be done (insert information into database, etc...)

//redirect user

header('Location: '.$redirect); die;

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Upload your file</title>

$(document).ready(function() {

//show the progress bar only if a file field was clicked

var show_bar = 0;

$('input[type="file"]').click(function(){

show_bar = 1;

});

//show iframe on form submit

$("#form1").submit(function(){

if (show_bar === 1) {

$('#upload_frame').show();

function set () {

$('#upload_frame').attr('src','upload_frame.php?up_id=<?php echo $up_id; ?>');

}

setTimeout(set);

}

});

</script>

</head>

<body>

<div>

<?php if (isset($_GET['success'])) { ?>

<span class="notice">업로드 완료 되었습니다..</span>

<?php } ?>

<br />

업로드할 파일<br />

<br />

<br />

</form>

</div>

</body>

</html>

2. upload_frame.php

iframe 형태로 진행상태를 보여주는 파일

<?php

$url = basename($_SERVER['SCRIPT_FILENAME']);

//Get file upload progress information.

if(isset($_GET['progress_key'])) {

$status = apc_fetch('upload_'.$_GET['progress_key']);

echo $status['current']/$status['total']*100;

die;

}

$(document).ready(function() {

setInterval(function()

{

$.get("<?php echo $url; ?>?progress_key=<?php echo $_GET['up_id']; ?>&randval="+ Math.random(), {

//get request to the current URL (upload_frame.php) which calls the code at the top of the page. It checks the file's progress based on the file id "progress_key=" and returns the value with the function below:

function(data) //return information back from jQuery's get request

{

$('#progress_container').fadeIn(100); //fade in progress bar

$('#progress_bar').width(data +"%"); //set width of progress bar based on the $status value (set at the top of this page)

$('#progress_completed').html(parseInt(data) +"%"); //display the % completed within the progress bar

}

)},500); //Interval is set at 500 milliseconds (the progress bar will refresh every .5 seconds)

});

</script>

</div>

</body>

추가로 위의 샘플에서는 css 파일도 사용하는데.. 이건 첨부파일을 참고

자.. 최종결과는 아래와 같이 실행이된다.

최종 소스 파일들..

php_upload_progress.zip

저작자표시 비영리 변경금지

'서버설정' 카테고리의 다른 글

[TIP] 서버 ssh (Secure Shell) 22번 포트에서 다른 포트로 변경하기 - 보안이슈 (0)	2015.04.08
[CentOS] 서비스 자동시작 설정 (0)	2015.02.24
CentOS 6.5 에 mysql 5.6 yum 으로 설치하기 (0)	2014.07.29
vmware에 CentOS 6.5 설치하기 (0)	2014.07.28
[windows 2008 r2] powershell 이용한 이벤트 로그 지우기 (0)	2014.07.01