jQuery Form 플러그인 + 다음에디터를 이용하여 에디터영역에 이미지업로드하기 IT Code Storage

지난번에 다음에디터 기본 연동하는법에 대해서 포스팅 해보았습니다.

2014/10/30 - [코드저장소/다음에디터연동] - jQuery를 적용한 다음에디터 기본연동 및 서버에 입력내용 전송법

이번에는 사진첨부 기능을 이용하여

업로드한 사진들을 에디터 내에 출력되는 기능에 대하여

포스팅 하도록 하겠습니다.

사진첨부기능 구현하기전에 추가작업 부분은

파일을 ajax upload하여 json data를 callback으로 받아야 하기 때문에

jquery.form.js 다운로드를 하셔야 합니다.

2014/10/10 - [코드저장소/jQuery 플러그인] - jQuery Form플러그인 이용한 ajax 파일업로드하기 + FormData() 추가설명

상단을 참고하셔서 js파일을 다운로드 받으신후

/daumeditor/pages/trex/ 경로에 jquery.form.js파일을 include 합니다.

그리고 파일을 서버에 전달을 하여야 하므로

파일처리 라이브러리가 별도로 필요합니다.

위 포스팅을 참고하셔서 commons-fileupload, commons-io 라이브러리 파일을 lib 디렉토리에 include 해주세요

다음과 같이 위치하면 되겠습니다.

위치에 관련 파일을들 위치하는 작업을 마쳤다면

본격적인 사진첨부기능 포스팅을 진행하도록 하겠습니다.

제일먼저 에디터에 붙어있는 사진버튼을 클릭하면

기본적으로 "/daumeditor/pages/trex/image.html" 페이지를

팝업창으로 띄워주는데 image.html 파일을 일부 수정하도록 하겠습니다.

추가로 필요한 JS파일을 INCLUDE 해주도록 합니다.

image.html JS파일 INCLUDE

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>

이어서 body 태그 일부분을 수정하였는데 그냥 body태그내에 모든 태그를 다음태그로 덮어쓰기 해주세요

Body 태그내 덮어쓰기 HTML 코드

<div class="wrapper">
	<div class="header">
		<h1>사진 첨부</h1>
	</div>	
	<div class="body">
		<dl class="alert">
		    <dt>사진 첨부 확인</dt>
		    <dd>
		    <form id="frm" action="/fileupload.jsp" method="post">
		    	<input type="file" name="image_file"/>
		    </form>
			</dd>
		</dl>
	</div>
	<div class="footer">
		<ul>
			<li class="submit"><a href="#" id="saveBtn" title="등록" class="btnlink">등록</a> </li>
			<li class="cancel"><a href="#" onclick="closeWindow();" title="취소" class="btnlink">취소</a></li>
		</ul>
	</div>
</div>

실실적으로 바뀐부분은 form태그를 기존 text 태그에서 교체를 해준것과 등록버튼 일부 변경이 된것입니다.

마지막으로 html 코드내에 정의되어있는 자바스크립트 done 함수와 initUploader함수가

정의되어있을텐데 일부를 변경하였으므로 통째로 덮어씌워주시면 되겠습니다.

SCRIPT태그 덮어쓰기코드

$(function(){
    	$("#saveBtn").click(function(){
    		$("#frm").submit();
    	})
    	//ajax form submit
    	$('#frm').ajaxForm({
            beforeSubmit: function (data,form,option) {
            	//validation체크 
            	//막기위해서는 return false를 잡아주면됨
                return true;
            },
            success: function(response,status){
            	//성공후 서버에서 받은 데이터 처리
            	done(response);
            },
            error: function(){
            	//에러발생을 위한 code페이지
            	alert("error!!");
            }                               
        });
    })
	function done(response) {
		if (typeof(execAttach) == 'undefined') { //Virtual Function
	        return;
	    }
		var response_object = $.parseJSON( response );
		execAttach(response_object);
		closeWindow();
	}

	function initUploader(){
	    var _opener = PopupUtil.getOpener();
	    if (!_opener) {
	        alert('잘못된 경로로 접근하셨습니다.');
	        return;
	    }
	    
	    var _attacher = getAttacher('image', _opener);
	    registerAction(_attacher);
	}

현재는 이미지 확장자 체크를 하지 않아 사진파일이 아니더라도 모든 파일이 업로드 가능합니다

하지만 에디터에 추가는되지만 깨진 이미지로 인식이 되겠죠?

확장자 체크를 하기위해서는 image.html 파일내 ajaxForm 함수를 적용한 스크립트부분이 있습니다.

beforeSubmit 내에서 확장자 validation 체크기능을 구현하시면 되겠습니다.

※ 사진버튼 클릭시 팝업창 넓이/높이 사이즈가 생각보다 넓습니다.

/daumeditor/js/trex/attacher/image.js 파일의 49번째줄을 보시면

features: { left:250, top:65, width:797, height:644 },

위코드의 속성값이 정해져있는데 width / height 속성값을 변경해주시면 되겠습니다.

저는 다음과 같이 사이즈를 절반정도 줄여주었습니다.

features: { left:250, top:65, width:350, height:300 },

마지막으로 파일처리를 해주는 fileupload.jsp 페이지내 코드를 작성해보도록 하겠습니다.

기존 스마트에디터 싱글사진업로드 기능과 유사한 코드이고 일부 다릅니다.

fileupload.jsp 사진업로드 처리 샘플코드

if (ServletFileUpload.isMultipartContent(request)){
	ServletFileUpload uploadHandler = new ServletFileUpload(new DiskFileItemFactory());
	//UTF-8 인코딩 설정
	uploadHandler.setHeaderEncoding("UTF-8");
	List<FileItem> items = uploadHandler.parseRequest(request);
	String realname = "";
	Long size = 0L;
	//각 필드태그들을 FOR문을 이용하여 비교를 합니다.
	for (FileItem item : items) {
		//image.html 에서 file 태그의 name 명을 "image_file"로 지정해 주었으므로 
		if(item.getFieldName().equals("image_file")) {
			if(item.getSize() > 0) {
				String ext = item.getName().substring(item.getName().lastIndexOf(".")+1);
		   		//파일 기본경로
	    		String defaultPath = request.getServletContext().getRealPath("/");
	    		//파일 기본경로 _ 상세경로
	    		String path = defaultPath + "upload" + File.separator;
	    		
	    		File file = new File(path);
	    		
	    		//디렉토리 존재하지 않을경우 디렉토리 생성
	    		if(!file.exists()) {
	    			file.mkdirs();
	    		}
	    		//서버에 업로드 할 파일명(한글문제로 인해 원본파일은 올리지 않는것이 좋음)
	    		realname = UUID.randomUUID().toString() + "." + ext;
	    		size = item.getSize();
				///////////////// 서버에 파일쓰기 ///////////////// 
				InputStream is = item.getInputStream();
				OutputStream os=new FileOutputStream(path + realname);
				int numRead;
				byte b[] = new byte[(int)item.getSize()];
				while((numRead = is.read(b,0,b.length)) != -1){
					os.write(b,0,numRead);
				}
				if(is != null) 	is.close();
				os.flush();
				os.close();
				///////////////// 서버에 파일쓰기 /////////////////
			}
		}
	}
	response.setContentType("text/plain; charset=UTF-8");
	PrintWriter pw = response.getWriter();
	//json string 값으로 callback
	//json 값으로 넘기는 필요 값
	//imageurl, filename,filesize,imagealign
	pw.print("{\"imageurl\" : \"/upload/"+realname+"\",\"filename\":\""+realname+"\",\"filesize\": 600,\"imagealign\":\"C\"}");
	pw.flush();
	pw.close();
}

fileupload.jsp에 사용된 IMPORT CLASS

java.io.PrintWriter
java.util.UUID
java.io.File
java.io.FileOutputStream
java.io.OutputStream
java.io.InputStream
java.util.List
org.apache.commons.fileupload.disk.DiskFileItemFactory
org.apache.commons.fileupload.servlet.ServletFileUpload
org.apache.commons.fileupload.FileItem

이걸로 다음에디터내에 이미지 첨부 샘플구현이 완료되었습니다.

그럼 실행결과를 끝으로 포스팅을 마무리 짓도록 하겠습니다.

다음에디터 실행