Spring3 MVC Restful방식으로 스마트에디터 연동(사진첨부 다중파일 포함) 해보기

스프링 MVC + 스마트에디터 연동은 기존 JAVA/JSP 버전의 연동방식과 별차이가 없습니다.

물어보시는 분들이 종종 계셔서 포스팅 해보도록 하겠습니다.

STS 의 Spring Project 를 생성하여 기본 MVC 구조잡기/파일처리/리소스경로에 대한 설정이 필요합니다. 

해당 설정은 하단 포스팅을 참고해주세요.

기존 본인이 적용하고 계신 연동법이 존재한다면 

하단 포스팅을 참고하지 않으셔도 되겠습니다.

2014/11/06 - [개발에필요한연동법/스프링연동] - STS 이클립스를 이용하여 UTF-8 인코딩 설정 및 Spring3 MVC 연동해보기

2014/11/06 - [개발에필요한연동법/스프링연동] - Spring3 한글깨짐 방지를 위한 UTF-8 인코딩 설정하기

2014/11/07 - [개발에필요한연동법/스프링연동] - Spring3 파일전송을 위한 multipartResolver 설정하기

2014/11/07 - [개발에필요한연동법/스프링연동] - Spring3 RESTFUL 방식 리소스파일 및 favicon 인식할수 있게 설정하기

Spring MVC 설정이 완료되었다면 

스마트 에디터를 개발자센터에 가서 다운로드 받도록 합니다.

다운로드 관련 포스팅은 하단을 참고해주세요

2014/10/29 - [코드저장소/스마트에디터연동] - 네이버 스마트에디터 기본연동법 및 서버에 입력값 전송하기

에디터관련 파일다운로드까지 완료가 되었다면 

본인의 /루트디렉토리/resource/editor/ 디렉토리 생성후 

해당 파일들을 모두 INCLUDE 해놓도록 합니다.

디렉토리 경로 중 "/resource/" 부분은 Spring MVC 리소스경로 설정시 지정한 디렉토리명으로 지정해줍니다.

위처럼 include 작업이 완료되었다면 

html 페이지 혹은 jsp 페이지를 생성하여 다음 코드를 진행하도록 합니다.

jQuery + 에디터관련JS파일을 include

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/resource/editor/js/HuskyEZCreator.js" charset="utf-8"></script>

Body태그내에 작성할 샘플 HTML 코드

<!-- action : 에디터에 입력한 html 코드를 전달받을 Controller페이지 URL -->
<form action="/submit" method="post" id="frm">
	<textarea name="editor" id="editor" rows="10" cols="100" style="width:766px; height:412px;"></textarea>
	<input type="button" id="savebutton" value="서버전송" />
</form>

스마트에디터프레임 + 전송버튼클릭이벤트스크립트

$(function(){
	//전역변수
	var obj = [];				
	//스마트에디터 프레임생성
	nhn.husky.EZCreator.createInIFrame({
		oAppRef: obj,
		elPlaceHolder: "editor",
		sSkinURI: "/resource/editor/SmartEditor2Skin.html",	
		htParams : {
			// 툴바 사용 여부 (true:사용/ false:사용하지 않음)
			bUseToolbar : true,				
			// 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
			bUseVerticalResizer : true,		
			// 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
			bUseModeChanger : true,	
		}
	});
	//전송버튼
	$("#savebutton").click(function(){
		//id가 smarteditor인 textarea에 에디터에서 대입
		obj.getById["editor"].exec("UPDATE_CONTENTS_FIELD", []);
		//폼 submit
		$("#frm").submit();
	})
})

에디터 컨텐츠내용을 받을 /submit Controller

@RequestMapping("/submit")
public void submit(HttpServletRequest request){
	System.out.println("에디터 컨텐츠값:"+request.getParameter("editor"));
}

간단하게 실행 후 에디터에 테스트 내용 작성후 

서버페이지에서 정상적으로 에디터 내용이 출력되는지 테스트를 해보도록 합니다.

위와같이 에디터가 출력되어 각각 입력 후 서버전송 버튼 클릭시 

이클립스 콘솔창에 정상적으로 HTML 태그 + 컨텐츠 내용이 출력된 것을 확인하실수가 있습니다.

404 오류가 나는데 이부분은 무시하셔도 됩니다 ^^ㅋ

이어서 에디터 우측상단 사진버튼을 클릭하여 

에디터내에 이미지 파일을 첨부해보도록 하겠습니다.

사진첨부기능은 싱글/멀티 파일업로드를 지원합니다.

단, IE9이하 버전에서는 싱글파일업로드만 지원하며 

그외브라우저 및 IE10 이상부터는 드래그를 이용하여 다중파일업로드기능을 지원합니다.

"/resource/editor/photo_uploader/popup/photo_uploader.html"

form 태그가 존재합니다.

action="FileUploader.php" 의미가 없으므로 삭제해주시던가 "FileUploader.php" 값을 지워주도록 합니다.

"/resource/editor/photo_uploader/popup/attach_photo.js"

479번째 줄의 callFileUploader () 함수(단일사진첨부함수)를 보면 

sUrl  : location.href.replace(/\/[^\/]*$/, '') + '/file_uploader.php',	//샘플 URL입니다.
sCallback : location.href.replace(/\/[^\/]*$/, '') + '/callback.html',	//업로드 이후에 iframe이 redirect될 콜백페이지의 주소

위코드를 다음처럼 재정의 해주도록 합니다.

sUrl  : '/photoUpload',	//파일업로드시 동작되는 컨트롤러 url
sCallback : '/resource/editor/photo_uploader/popup/callback.html',	//업로드 이후  redirect 페이지 url

이어서 333번째 줄의 html5Upload() 함수(다중사진첨부함수)를 보시면 

sUploadURL= 'file_uploader_html5.php'; 	//upload URL

위코드를 다음처럼 변경해주도록 합니다

sUploadURL= '/multiplePhotoUpload'; 	//다중파일업로드 URL

클라이언트 설정변경을 위와같이 모두 해주셨다면 

이어서 서버페이지 코드작성을 해보도록 하겠습니다.

첨부파일을 받기위한 파일관련 VO 정의

public class PhotoVo {
	//photo_uploader.html페이지의 form태그내에 존재하는 file 태그의 name명과 일치시켜줌
	private MultipartFile Filedata;
	//callback URL
	private String callback;
	//콜백함수??
	private String callback_func;

	public MultipartFile getFiledata() {
		return Filedata;
	}

	public void setFiledata(MultipartFile filedata) {
		Filedata = filedata;
	}

	public String getCallback() {
		return callback;
	}

	public void setCallback(String callback) {
		this.callback = callback;
	}

	public String getCallback_func() {
		return callback_func;
	}

	public void setCallback_func(String callback_func) {
		this.callback_func = callback_func;
	}
}

단일사진첨부 컨트롤러

//단일파일업로드
@RequestMapping("/photoUpload")
public String photoUpload(HttpServletRequest request, PhotoVo vo){
	String callback = vo.getCallback();
	String callback_func = vo.getCallback_func();
	String file_result = "";
	try {
		if(vo.getFiledata() != null && vo.getFiledata().getOriginalFilename() != null && !vo.getFiledata().getOriginalFilename().equals("")){
			//파일이 존재하면
			String original_name = vo.getFiledata().getOriginalFilename();
			String ext = original_name.substring(original_name.lastIndexOf(".")+1);
	   		//파일 기본경로
    		String defaultPath = request.getSession().getServletContext().getRealPath("/");
    		//파일 기본경로 _ 상세경로
    		String path = defaultPath + "resource" + File.separator + "photo_upload" + File.separator;	    		
    		File file = new File(path);
    		System.out.println("path:"+path);
    		//디렉토리 존재하지 않을경우 디렉토리 생성
    		if(!file.exists()) {
    			file.mkdirs();
    		}
    		//서버에 업로드 할 파일명(한글문제로 인해 원본파일은 올리지 않는것이 좋음)
    		String realname = UUID.randomUUID().toString() + "." + ext;
		///////////////// 서버에 파일쓰기 ///////////////// 
    		vo.getFiledata().transferTo(new File(path+realname));
    		file_result += "&bNewLine=true&sFileName="+original_name+"&sFileURL=/resource/photo_upload/"+realname;
		} else {
			file_result += "&errstr=error";
		}
	} catch (Exception e) {
		e.printStackTrace();
	}
	return "redirect:" + callback + "?callback_func="+callback_func+file_result;
}

IE를 실행하여 단일업로드를 확인해보도록 하겠습니다.

※ 만약 IE10 이상이며 다중파일업로드 화면이 출력이 된다 하시면 

attach_photo.js 파일의 38번째줄을 보시면 checkDragAndDropAPI() 함수내에 존재하는

bSupportDragAndDropAPI = true;

위처럼 true부분을 하단처럼 false로 변경해주도록 합니다.

bSupportDragAndDropAPI = false;

단일 사진첨부기능은 구현이 완료되었습니다.

이어서 HTML5 드래그앤드롭 기능을 이용한 스마트에디터 파일업로드 관련 컨트롤러를 작성해보도록 하겠습니다.

다중사진첨부 컨트롤러

//다중파일업로드
@RequestMapping("/multiplePhotoUpload")
public void multiplePhotoUpload(HttpServletRequest request, HttpServletResponse response){
	try {
		 //파일정보
		 String sFileInfo = "";
		 //파일명을 받는다 - 일반 원본파일명
		 String filename = request.getHeader("file-name");
		 //파일 확장자
		 String filename_ext = filename.substring(filename.lastIndexOf(".")+1);
		 //확장자를소문자로 변경
		 filename_ext = filename_ext.toLowerCase();
		 //파일 기본경로
		 String dftFilePath = request.getSession().getServletContext().getRealPath("/");
		 //파일 기본경로 _ 상세경로
		 String filePath = dftFilePath + "resource" + File.separator + "photo_upload" + File.separator;
		 File file = new File(filePath);
		 if(!file.exists()) {
		 	file.mkdirs();
		 }
		 String realFileNm = "";
		 SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss");
		 String today= formatter.format(new java.util.Date());
		 realFileNm = today+UUID.randomUUID().toString() + filename.substring(filename.lastIndexOf("."));
		 String rlFileNm = filePath + realFileNm;
		 ///////////////// 서버에 파일쓰기 ///////////////// 
		 InputStream is = request.getInputStream();
		 OutputStream os=new FileOutputStream(rlFileNm);
		 int numRead;
		 byte b[] = new byte[Integer.parseInt(request.getHeader("file-size"))];
		 while((numRead = is.read(b,0,b.length)) != -1){
		 	os.write(b,0,numRead);
		 }
		 if(is != null) {
		 	is.close();
		 }
		 os.flush();
		 os.close();
		 ///////////////// 서버에 파일쓰기 /////////////////
		 // 정보 출력
		 sFileInfo += "&bNewLine=true";
		 // img 태그의 title 속성을 원본파일명으로 적용시켜주기 위함
		 sFileInfo += "&sFileName="+ filename;;
		 sFileInfo += "&sFileURL="+"/resource/photo_upload/"+realFileNm;
		 PrintWriter print = response.getWriter();
		 print.print(sFileInfo);
		 print.flush();
		 print.close();
	} catch (Exception e) {
		e.printStackTrace();
	}
}

HTML5 다중파일업로드에 대한 실행을 해보도록 하겠습니다.

IE10이상 혹은 크롬/사파리등 기타 브라우저에서 실행을 해주세요

위와같이 드래그앤드롭기능을 이용한 다중사진업로드 기능구현이 완료되었습니다.

by 개발로짜