[Uplodify] Uplodify 플러그인을 사용한 파일 업로드

jQuery/Uplodify 2016. 10. 11. 16:48




■ 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 폴더로 이동해 보면. 선택한 이미지 파일이 업로드 된것을 확인 할 수 있다.









'jQuery > Uplodify' 카테고리의 다른 글

[Uplodify] Uplodify 플러그인을 사용한 파일 업로드  (0) 2016.10.11