■ UplodiFive 플러그인을 사용한 파일 업로드
-. UplodiFive는 Uploadify와 같은 파일 업로드 플러그인 이지만 Uploadify와 달리 Flash를 사용하지 않고 HTML5로 제작되어있다.
-. 유료 라이센스이고 Standard License - $5 USD, Commercial License - $100 USD 가격으로 각각 판매중이다.
-. 구입을 위해서는 기본적으로 PayPal 계정을 만들어야 한다.
01. 먼저 Uploadify(www.uploadify.com) 사이트에 접속하여 상단의 download를 클릭하자.
02. 다운받을 UploadiFive의 버전을 선택한다.
① 필자는 개인적으로 사용할 Standard License 버전($5.00)을 선택했다.
② 선택이 완료되면 Purchase를 클릭한다.
03. 하단의 Download 버튼을 클릭한다.
04. UploadiFive를 구매하기 위해서는 기본적으로 PayPal 계정이 필요하다.
PayPal 계정이 존재한다면 로그인 하고 Pay Now 버튼을 클릭하여 결제를 진행하자.
05. 결제가 완료되면 아래와 같이 결제가 되었음을 알려주는 창이 나타난다.
하단의 페이팔 계정으로 사용중인 메일을 확인하자.
UploadiFive 플러그인을 다운받을 수 있는 링크는 해당 메일로 발송해 준다.
06. 메일로 접속하면 아래와 같이 Uploadify에서 메일이 날라온 것을 확인 할 수 있다.
① UploadiFive Download Details라는 제목으로 온 메일을 열람한다.
② 메일 내용의 다운로드 링크를 클릭한다.
③ uploadifive_standard.zip 파일을 다운받는다.
07. 다운받은 uploadifive_standard.zip 파일을 프로젝트를 실행할 경로에 위치시키고 아래와 같이 작업을 진행한다.
① uploadifive_standard.zip 파일을 압축 해제 프로그램을 통해 오픈한다.
② 그중 Sample 폴더에 잇는내용을 설치경로로 드래그 하여 Sample 파일만 압축을 해제한다.
③ Sample파일을 uploadfive로 파일명을 변경한다.
08. uploadifive 폴더에서 업로드한 파일을 보관할 uploads 폴더를 생성한다.
09. 이제 다운받은 UploadiFive 플러그인을 사용할 수 있게 먼저 index.php 파일을 수정한다.
index.php |
<?php $timestamp = time(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UploadiFive Test</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadifive.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadifive.css">
<style type="text/css">
body {
font:13px Arial, Helvetica, Sans-serif;
}
.uploadifive-button {
float:left;
margin-right:10px;
}
#queue {
border:1px solid #E5E5E5;
height:177px;
overflow:auto;
margin-bottom:10px;
padding:0 3px 3px;
width:300px;
}
</style>
</head>
<body>
<h1>UploadiFive Demo</h1>
<form>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="true">
<a style="position:relative;top:8px;" href="javascript:jQuery('#file_upload').uploadifive('upload')">Upload Files</a>
</form>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#file_upload").uploadifive({
auto : false // 파일 선택 후 여부 자동 업로드 (기본값 : true)
, checkScript : "check-exists.php" // 같은 이름의 먼저 업로드된 파일의 존재 여부를 확인하는 php 파일
, formData : { // formData 설정으로 사용자가 직접 업로드할 파일의 데이터를 지정할 수있다.
timestamp : "<?= $timestamp ?>"
, token : "<?= md5('unique_salt'.$timestamp) ?>"
}
, queueID : "queue" // 파일 업로드 상황을 나타내는 창의 위치를 강제적으로 지정한다.
, uploadScript : "uploadifive.php" // 파일 업로드를 수행할 php 파일
, onUploadComplete : function(file, data) { // 파일 하나의 업로드 작업이 완료 후 실행되는 트리거
console.log(data);
}
});
});
</script>
</body>
</html>
|
10. 다음은 실질적으로 파일을 업로드하는 uploadifve.php를 수정한다.
uploadifve.php |
<?php
// 업로드될 파일의 경로 지정
$uploadDir = "/uploadifyive/uploads/";
// 업로드 할 수 있는 파일의 확장자를 지정
$fileTypes = array('jpg', 'jpeg', 'gif', 'png');
$verifyToken = md5('unique_salt'.$_POST['timestamp']);
if(!empty($_FILES) && $_POST['token'] == $verifyToken) {
$tempFile = $_FILES['Filedata']['tmp_name'];
$uploadDir = $_SERVER['DOCUMENT_ROOT'].$uploadDir;
$targetFile = $uploadDir.$_FILES['Filedata']['name'];
// 파일 형식의 유효성 검사
$fileParts = pathinfo($_FILES['Filedata']['name']);
if (in_array(strtolower($fileParts['extension']), $fileTypes)) {
// 파일을 저장한다.
move_uploaded_file($tempFile, $targetFile);
echo 1;
} else {
echo "해당 형식의 파일은 업로드 할 수 없습니다.";
}
}
?>
|
11. 마지막으로 먼저 언로드된 파일중 중복된 파일명이 존재하는지 체크할 check-exists.php를 수정한다.
check-exists.php |
<?php
// 업로드 폴더의 위치를 지정한다.
$targetFolder = "/uploadifyive/uploads/";
// 동일한 이름의 파일이 존재하면 1을 존재하지 않는다면 0을 출력한다.
if(file_exists($_SERVER['DOCUMENT_ROOT'].$targetFolder.$_POST['filename'])) {
echo 1;
} else {
echo 0;
}
?>
|
12. 설정이 다 끝났으면 index.php를 실행하고 아래와 같은 순서로 작업을 진행해 보자.
① SELECT FILES 버튼을 클릭한다.
② 업로드할 이미지를 선택하면 하고 확인 버튼을 클릭한다.
③ 그럼 파일을 업로드할 파일의 목록이 지정한 영역에 나타나는 것을 확인 할 수 있다.
13. 이제 실제 업로드 경로로 파일을 업로드 해보자.
① Upload Files를 클릭한다.
② 그럼 해당파일이 업로드 되는 모습을 확인 할 수 있다.
14. 문제가 없다면 uploads 업로드한 파일이 정상적으로 올라가 있는 모습을 확인 할 수 있다.
