이전 글에서 다음에디터를 붙여서 게시판 글쓰기 부분을 수정해봤습니다.
그 부분에서 빠져 있는 사진 삽입과 파일 첨부를 살펴보겠습니다.
로그인을 하고 bbs/list.php에 접근해서 글 쓰기 버튼을 클릭합시다.
아! list.php 에 글쓰기 버튼을 달아놓지 않았군요.
<div class="btn-area">
<a href="http://<?php echo $_SERVER['HTTP_HOST'];?>/bbs/write.php" class="btn">글쓰기</a>
</div>
글쓰기 화면으로 가서 왼쪽 위의 사진 아이콘을 클릭해봅시다.
사진 첨부를 위한 새로운 창이 뜹니다.
bbs/pages/trex/image.html 파일이 나타나는 군요. 또 소스를 들여다 봐야겠습니다.
예제로 확인버튼을 누르면 첨부할 이미지의 정보를 에디터로 넘기고, 에디터에 표시되도록 해놓았네요.
이미지 파일을 업로그하는 내용은 없군요.
업로드 기능을 구현하고, 업로드한 파일의 정보를 예제에 있는 함수를 통해 에디터로 넘겨야 할 거 같습니다.
업로드 기능은... 또 다른 이야기네요.. 하나 더 해야되는구나...ㅡ.ㅡ
악~! 여기 이후로 작성한 거 다 날아갔네요..ㅡ.ㅡ
설명이 부실해질겁니다.ㅡ.ㅡ
trex/image.html 파일을 열어서 적당한 곳에 아래 코드를 넣읍시다.
<form method="post" enctype="multipart/form-data" action="../../image_uploader.php">
<input type="file" name="upload_file">
<input type="submit" value="업로드">
</form>
찾아보기, 업로드 버튼이 생깁니다.
컴퓨터에 있는 이미지를 선택하고 업로드를 하면, 받아서 처리할 녀석이 있어야겠지요.
www/bbs/ 아래에 image_uploader.php를 하나 만듭시다.
아래 코드로 시작합시다.
| <?php require_once $_SERVER['DOCUMENT_ROOT'].'/preset.php'; ?> <?php $file_name = $_FILES['upload_file']['name']; $tmp_file = $_FILES['upload_file']['tmp_name']; $file_path = $path['root'].'files/'.$file_name; $image_url = $url['root'].'files/' . $file_name; $r = move_uploaded_file($tmp_file, $file_path); $file_size = $_FILES["upload_file"]["size"]; ?> |
쉽게 찾아볼 수 있는 파일 업로드 관련 코드입니다.
www/files 라는 곳에 업로드를 합니다. 테스트해서 잘 되는지 일단 확인하세요.
그럼, 이렇게 서버쪽으로 넘어온 이미지를 다음에디터에 정보를 넘겨줘서 편집하고 있는 화면에 삽입을 할 수 있어야겠네요.
trex/image.html 에 정보는 다 있습니다.
위 코드 아래에 에디터와 교신을 할 부분을 작성합시다.
| <!DOCTYPE html> <html> <head> <meta charset=utf-8"> <title>image_uploader.php</title> <script src="./js/popup.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="./css/popup.css" type="text/css" charset="utf-8"/> <script type="text/javascript"> // <![CDATA[ function initUploader(){ var _opener = PopupUtil.getOpener(); if (!_opener) { alert('잘못된 경로로 접근하셨습니다.'); return; } var _attacher = getAttacher('image', _opener); registerAction(_attacher); if (typeof(execAttach) == 'undefined') { //Virtual Function return; } var _mockdata = { 'imageurl': '<?php echo $image_url; ?>', 'filename': '<?php echo $file_name; ?>', 'filesize': <?php echo $file_size; ?>, 'imagealign': 'C', 'originalurl': '<?php echo $image_url; ?>', 'thumburl': '<?php echo $image_url; ?>' }; execAttach(_mockdata); closeWindow(); } // ]]> </script> </head> <body onload="initUploader();"> </body> </html> |
trex/image.html 에 있던 initUploader()와 done()을 합치고, 다음에디터로 넘겨줄 이미지 관련 정보를 php로부터 가져와 세팅을 해 줬습니다.
그리고, 테스트를 해봅시다.
이미지 하나 골라서 업로드!
에디터내 이미지가 삽입되었습니다.
submit 을 클릭하니, 아래처럼, 첨부파일에 대한 정보가 표시되는군요.
글쓰기를 한 후, 글목록으로 가서 방금 작성한 글을 확인했습니다. 아래처럼 잘 나오는군요.
지금까지 다음에디터에서 이미지를 첨부하여 글 속에 삽입하는 기능을 살펴봤습니다.
전체적으로 어떻게 동작하는지 파악하는데, 의미를 두고자 했습니다.
어디 써먹기에는 문제가 많습니다.
다음에디터에 파일 첨부도 살펴보고 구현을 해 보겠습니다.
'PHP 게시판 만들기' 카테고리의 다른 글
| 22. 다음에디터 정리 (26) | 2013.09.25 |
|---|---|
| 20. 위지윅 에디터 붙이기 - 다음에디터 (10) | 2012.12.18 |
| 19. php 회원관리 및 게시판 소스 (2) | 2012.12.17 |
| 18. 아차! 하고 빼먹은 로그아웃 구현하기 (5) | 2012.12.17 |
| 17. php로 기초적인 게시판 만들기 - 글 삭제하기 (2) | 2012.12.17 |
댓글