본문 바로가기

DaumEditor

[DaumEditor] 다음 에디터 사진첨부(uploadify) 기능 추가하기.

반응형





첨부파일 : editor.zip




uploadify를 사용한 사진첨부 기능 추가하기.






다음 에디터는 기본적으로 사진 업로드 기능을 사용자가 직접 추가하여야 한다.

그래서 이번 포스트에서는 무료 업로드 모듈이 uplodyfy를 사용하여

한번에 여러장의 사진을 에디터를 통해 등록할 수 있게끔 해보고자 한다.






01. 다음 에디터를 세팅하고 사진 파일을 클릭하면 위와같이 아무것도 없는 화면만 나타난다.





02. 사진 업로드 기능 구현을 위해 uploadify를 사용해보자. http://www.uploadify.com/ 해당 사이트에 접속해서 uploadify를 다운받는다.

 ① 사이트에 접속하여 Flash Version을 선택한다.

 ② uploadify.zip 파일을 다운받는다.

※ HTML5 Version인 uploadyfive는 유료버전이기에 해당 포스트에서는 무료버전의 uploadyfyfmf 사용한다.






03. 다운받은 uploadify.zip 파일의 압축을 해제한다.







04. 먼저 작업해 두었던 다음 에디터 프로젝트의 경로에 moduleuploads 라는 폴더를 생성한다.

 ① check-exists.php, uploadify.php, uploadify.swf 파일을 보관할 디렉토리.

 ② 업로드한 파일을 보관할 디렉토리.






05. 가장먼저 uploadify-cancel.png 이미지 파일을 아래 와 같이 경로 이동 시킨다.

 ① daumEditor/images/icon/editor/ 경로 이동한다.

 ② uploadify-cancel.png 이미지 파일을 복사 붙여넣기 한다.







06. 다음으로 uploadify.css 파일을 다음 오픈 에디터 프로젝트로 위치시킨다.

 ① daumEditor/css/ 경로 이동한다.

 ② uploadify.css 이미지 파일을 복사 붙여넣기 한다.
 ③ uploadify.css 파이을 텍스트 편집기로 열어서 수정한다.






07. 위에서 업로드한 uploadify-cancel.png 이미지 파일의 경로를 절대경로로 수정하여 위치를 잡아준다.






08. jquery.uploadify.js, jquery.uploadify.min.js 두개의 *.js 파일들을 다음 오픈 에디터 프로젝트로 위치시킨다.

 ① daumEditor/js/ 폴더를 오픈한다.

 ② jquery.uploadify.js, jquery.uploadify.min.js 두개의 파일을 복사 붙여넣기 한다.






09. 이번엔 위에서 생성한 daumEditor/module/ 폴더로 check-exists.php, uploadify.php, uploadify.swf 3개의 파일들을 위치시키자.

 ① 위에서 생성한 module 폴더를 오픈하고.

 ② check-exists.php, uploadify.php, uploadify.swf 3개의 파일을 복사 붙여넣기 한다.

 ③ 이중 복사한 uploadify.php 파일을 텍스트 편집기로 열고 수정한다.






10. uploadify.php를 아래 코드와 같이 수정해 두자.

 uploadify.php

<?php
// 업로드될 파일의 경로를 지정한다.
$targetFolder = "/editor/uploads";

$verifyToken = md5("unique_salt".$_POST['timestamp']);

if(!empty($_FILES) && $_POST['token'] == $verifyToken) {
   
    $upName = $_POST['timestamp']."_".$_FILES['Filedata']['name'];    // 파일명 앞에 UNIX 시간을 붙여 중복되지 않게 구분한다.
    $tempFile = $_FILES['Filedata']['tmp_name'];
    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
    $targetFile = rtrim($targetPath, "/")."/".$upName;
   
    // 업로드 할 수 있는 파일의 확장자를 지정한다.
    $fileTypes = array('jpg', 'jpeg', 'gif', 'png');
    $fileParts = pathinfo($_FILES['Filedata']['name']);
   
    if(in_array($fileParts['extension'], $fileTypes)) {
        move_uploaded_file($tempFile, $targetFile);
    } else {
        echo "업로드 할 수 없는 형식의 파일입니다.";
    }
}
?>





11. 다음으로 다음 오픈 에디터의 editor.js 파일을 수정한다.







12. image.html이라고 적힌 부분을 찾고 아래 이미지와 같이 image.php로 수정한다.







13. 다음에디터 daumEditor/pages/trex/ 경로에 새로운 *.php 파일을 생성한다.

 ① 해당 경로의 image.html 파일의 사본을 제작한다.

 ② 해당 사본을 image.php로 변경혹은 생성하고, 텍스트에디터를 통해 수정한다.






14. 위에서 생성한 image.php 파일을 아래와 같이 수정한다.

 image.php

<?php $timestamp = time(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Daum에디터 - 이미지 첨부</title>
<link rel="stylesheet" href="http://localhost/editor/daumEditor/css/popup.css" type="text/css" charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="http://localhost/editor/daumEditor/css/uploadify.css">
<style type="text/css">
body {
    font:13px Arial, Helvetica, Sans-serif;
}
#queue {
    border:1px solid #E5E5E5;
    overflow:auto;
    margin-bottom:10px;
    padding:0 3px 3px;
    float:left;
    width:370px;
    height:490px;
}
#uploadButton {
    float:left;
    margin-left:10px;
}
</style>
<script src="http://localhost/editor/daumEditor/js/popup.js" type="text/javascript" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="http://localhost/editor/daumEditor/js/jquery.uploadify.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function done() {
        if(typeof(execAttach) == "undefined") {
            return;
        }


        // 업로드한 파일의 수만큼 게시판에 나타내기 위해 each 문을 통해 반복시킨다.
        jQuery(".fileInfo").each(function(idx) {
            var fileName = jQuery("input[name='fileName']").eq(idx).val();
            var fileUpName = jQuery("input[name='fileUpName']").eq(idx).val();
            var fileSize = jQuery("input[name='fileSize']").eq(idx).val();
            var fileUrl = "http://localhost/editor/uploads/" + fileUpName;

            alert(idx + "\n/\n" + fileName + "\n/\n" + fileUpName + "\n/\n" + fileSize + "\n/\n" + fileUrl);

            var _mockdata = {
                  "imageurl" : fileUrl
                , "filename" : fileName
                , "filesize" : fileSize
                , "imagealign": "C"
                , "originalurl" : fileUrl
                , "thumburl" : fileUrl
            };


            execAttach(_mockdata);
        });

        closeWindow();
    }

    function initUploader() {

        var _opener = PopupUtil.getOpener();

        if(!_opener) {
            alert("잘못된 경로로 접근하셨습니다.");
            return;
        }

        var _attacher = getAttacher("image", _opener);
        registerAction(_attacher);
    }
</script>
</head>
<body onload="initUploader();">
<div class="wrapper">
    <div class="header">
        <h1>사진 첨부</h1>
    </div>   
    <div class="body">
        <dl class="alert">
            <dt>사진 첨부 확인</dt>
            <div style="height:10px;"></div>
            <div>
                <div id="queue" style="float:left;"></div>
                <div id="uploadButton">

                    <!-- 업로드할 파일을 선택하는 '파일 선택' 버튼 -->

                    <input id="file_upload" name="file_upload" type="file" multiple="true">


                    <!-- 선택한 파일을 실제 uploads 폴더에 위치시키는 버튼 -->

                    <a style="position:relative;top:8px;" href="javascript:;" onClick="jQuery('#file_upload').uploadify('upload')">Upload Files</a>
                </div>
            </div>
        </dl>
    </div>
    <div class="footer" style="width:100%;position:absolute;right:0px;bottom:0px;">
        <p><a href="javascript:;" onClick="closeWindow();" title="닫기" class="close">닫기</a></p>
        <ul>
            <li class="submit"><a href="javascript:;" onClick="done();" class="btnlink">등록</a></li>
            <li class="cancel"><a href="javascript:;" onClick="closeWindow();" title="취소" class="btnlink">취소</a></li>
        </ul>
    </div>
</div>
<div id="hiddenFile"></div>
</body>
<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); ?>"
            , nation : "kr"
        }
        , queueID : "queue"                                                       // 파일 업로드 상황을 나타내는 창의 위치를 강제적으로 지정한다.
        , swf : "http://localhost/editor/module/uploadify.swf"            // 파일 업로드 이벤트에 사용될 플래쉬 파일
        , uploader : "http://localhost/editor/module/uploadify.php"    // 파일 업로드를 수행할 php 파일
        , onUploadComplete : function(file, data) {                         // 파일 하나의 업로드 작업이 완료 후 실행되는 트리거
            alert(data);
            var fileData = "<div class='fileInfo'>"
                            + "<input type='hidden' name='fileName' value='" + file.name + "'/>"
                            + "<input type='hidden' name='fileUpName' value='<?= $timestamp; ?>_" + file.name + "'/>"
                            + "<input type='hidden' name='fileSize' value='" + file.size +"'/>"
                            + "</div>";
            jQuery("#hiddenFile").append(fileData);
        }
    });
});
</script>
</html>





15. 이제 다시 다음 오픈 에디터를 실행하고, 사진 버튼을 클릭한다.






16. 이미지 첨부 팝업 창이 뜨면 아래 순서대로 작업을 수행한다.

 SELECT FILES 버튼을 클릭하고 업로드한 파일을 선택한다.

 ② 선택한 파일이 ③번 영역에 타이틀이 나타나면 Upload Files 버튼을 클릭하여 실제로 파일을 업로드 시킨다.

 업로드할 파일 목록이 나타나는 영역으로, Upload Files 버튼을 클릭하여 실제로 업로드가 다 되면 파란색 줄이 꽉 차서 나타난다.

 ④ 실제 업로드가 완료되면 등록 버튼을 클릭한다 그럼 다음 오픈 에디터에 선택한 이미지가 나타나는 것을 확인 할 수 있다.






17. 위 작업을 완료하면 아래와같이 에디터와 파일 첨부 영영에 이미지가 추가된 것을 확인 할 수 있다.

   등록버튼을 클릭하여 파일을 등록하자.





18. view.php 페이지에 POST 값으로 전달할 값이 잘 넘어오는것을 확인 할 수 있다.





19. 그럼 uploads 폴더로 이동해보면 UNIX시간_원본파일명 으로 이미지가 잘 등록되어 있는 것을 확인 할 수 있다.









반응형