첨부파일 : 
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시간_원본파일명 으로 이미지가 잘 등록되어 있는 것을 확인 할 수 있다.
