■ Uplodify 플러그인을 사용한 파일 업로드
-. Uplodify 플러그인은 파일 업로드를 위한 플러그인이다.
-. 무료 라이센스 버전이 Flash를 사용한다.
-. 플래쉬를 사용하지 않고 HTML5를 사용하려면 유료 라이센스인 UplodiFive를 구입해야 한다.
-. UploadiFive를 사용한 방법은 http://wickedmagic.tistory.com/533 페이지에 기술해 두었다.
01. 우선 Uplodify(http://www.uploadify.com) 사이트에 접속하여 파일 업로드 기능을 수행할 Uplodify를 다운받자.
① Flash Version을 클릭한다.
② 다운로드 창이 뜨면 확인을 누르고 uplodify.zip 파일을 다운받는다.
02. 프로젝트를 수행할 폴더에 다운받은 uplodify.zip 파일을 위치시키고 아래 순서대로 작업을 수행한다.
① uploadify.zip 파일의 압축을 해제한다.
② uploadify 폴더가 생성되면 해당 경로로 이동한다.
03. uplodify 폴더에서 파일을 업로드할 uploads라는 폴더를 생성한다.
04. 이제 Uplodify 소스를 수정해야하는데, 먼저 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>UploadiFy Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<style type="text/css">
body {
font:13px Arial, Helvetica, Sans-serif;
}
#file_upload {
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>Uploadify 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').uploadify('upload')">Upload Files</a>
</form>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#file_upload").uploadify({
auto : false // 파일 선택 후 여부 자동 업로드 (기본값 : true)
, removeCompleted : false // 파일 업로드 성공 후 업로드 창의 자동 삭제 여부 (기본값 : true)
, formData : { // formData 설정으로 사용자가 직접 업로드할 파일의 데이터를 지정할 수있다.
timestamp : "<?= $timestamp; ?>"
, token : "<?= md5('unique_salt'.$timestamp); ?>"
}
, queueID : "queue" // 파일 업로드 상황을 나타내는 창의 위치를 강제적으로 지정한다.
, swf : "uploadify.swf" // 파일 업로드 이벤트에 사용될 플래쉬 파일
, uploader : "uploadify.php" // 파일 업로드를 수행할 php 파일
, onUploadComplete : function(file, data) { // 파일 하나의 업로드 작업이 완료 후 실행되는 트리거
console.log(data);
}
});
});
</script>
</body>
</html>
|
05. 다음으로 업로드 창의 '취소' 버튼을 나타내기 위해 uploadify.css에서 uploadify-cancel.png의 위치를 수정하자.
uploadify.css
|
··· 이 하 생 략 ···
.uploadify-queue-item .cancel a {
background:url("../uploadify/uploadify-cancel.png") 0 0 no-repeat;
float:right;
height:16px;
text-indent:-9999px;
width:16px;
}
··· 이 하 생 략 ···
|
06. 마지막으로 실질적으로 파일을 업로드할 uploadify.php 를 수정한다.
uploadify.php |
<?php
// 업로드될 파일의 경로를 지정한다.
$targetFolder = "/uploadify/uploads";
$verifyToken = md5('unique_salt'.$_POST['timestamp']);
if(!empty($_FILES) && $_POST['token'] == $verifyToken) {
$tempFile = $_FILES['Filedata']['tmp_name'];
$targetPath = $_SERVER['DOCUMENT_ROOT'].$targetFolder;
$targetFile = rtrim($targetPath, '/').'/'.$_FILES['Filedata']['name'];
// 업로드 할 수 있는 파일의 확장자를 지정한다.
$fileTypes = array('jpg','jpeg','gif','png');
$fileParts = pathinfo($_FILES['Filedata']['name']);
if(in_array($fileParts['extension'],$fileTypes)) {
move_uploaded_file($tempFile,$targetFile);
echo '1';
} else {
echo "업로드 할 수 없는 형식의 파일입니다.";
}
}
?>
|
07. index.php를 실행하고 아래와 같은 순서로 작업을 진행해 보자.
① SELECT FILES 버튼을 클릭한다.
② 업로드할 이미지를 선택하면 하고 확인 버튼을 클릭한다.
③ 그럼 파일을 업로드할 파일의 목록이 지정한 영역에 나타나는 것을 확인 할 수 있다.
08. 이제 파일을 업로드 해보자.
① Upload Files를 클릭한다.
② 그럼 해당파일이 업로드 되는 모습을 확인 할 수 있다.
09. 그럼 이제 위에서 지정한 uploads 폴더로 이동해 보면. 선택한 이미지 파일이 업로드 된것을 확인 할 수 있다.
