첨부파일 : editor.zip
■ uploadify를 사용한 사진첨부 기능 추가하기.
다음 에디터는 기본적으로 사진 업로드 기능을 사용자가 직접 추가하여야 한다.
그래서 이번 포스트에서는 무료 업로드 모듈이 uplodyfy를 사용하여
한번에 여러장의 사진을 에디터를 통해 등록할 수 있게끔 해보고자 한다.
01. 다음 에디터를 세팅하고 사진 파일을 클릭하면 위와같이 아무것도 없는 화면만 나타난다.
02. 사진 업로드 기능 구현을 위해 uploadify를 사용해보자. http://www.uploadify.com/ 해당 사이트에 접속해서 uploadify를 다운받는다.
① 사이트에 접속하여 Flash Version을 선택한다.
② uploadify.zip 파일을 다운받는다.
※ HTML5 Version인 uploadyfive는 유료버전이기에 해당 포스트에서는 무료버전의 uploadyfyfmf 사용한다.
03. 다운받은 uploadify.zip 파일의 압축을 해제한다.
04. 먼저 작업해 두었던 다음 에디터 프로젝트의 경로에 module과 uploads 라는 폴더를 생성한다.
① 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시간_원본파일명 으로 이미지가 잘 등록되어 있는 것을 확인 할 수 있다.