Spring3을 이용한 스마트에디터(smarteditor) 이미지업로드(+html5) 적용하기

기존 JAVA/JSP 버전을 이용하여 네이버 스마트에디터를 연동법을 소개했었다

이번에는 기존 포스팅 코드를 응용하여 spring 으로  포스팅을 해보도록 하겠다

처음부터 끝까지 상세하게 설명은 하지 않도록 하겠음 

기존에 포스팅한 내용을 응용하였기 때문임

우선 스프링 기반의 에디터 구조는 다음과 같다

에디터에 들어있는 파일들은 리소스 파일이므로 /resources/editor 폴더내에 스마트에디터 관련 파일들을 붙여놓았다

2014/07/25 - [스프링연동하기/spring3 기타설정] - 스프링3(Spring3) - 리소스(resource file) 및 favicon.ico 설정

스프링의 리소스 연동은 위 포스팅을 참고하도록 하자

다음으로 기본적인 에디터 연동에 대한 포스팅은 

2014/07/17 - [에디터연동/NAVER-스마트에디터] - 네이버의 스마트에디터를 연동해보고 서버에 내용을 전달해보자

해당 포스팅을 참고하도록 하자

물론 include하는 경로는 설정해놓은 path를 적용하도록 하자

본인의 에디터 경로는 다음과 같다

spring 연동시 필수록 있어야 할 pom.xml의 dependency 및 xml 설정

pom.xml 필요 라이브러리

<dependency>
	    <groupId>commons-fileupload</groupId>
	    <artifactId>commons-fileupload</artifactId>
	    <version>1.3.1</version>
</dependency>
<dependency>
	    <groupId>commons-io</groupId>
	    <artifactId>commons-io</artifactId>
	    <version>2.4</version>
</dependency>

mvc-config.xml 파일관련 및 리소스 적용 설정

<mvc:resources mapping="/resources/**" location="/resources/" />
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

/resources/editor/photo_uploader/popup/attach_photo.js 설정

○  callFileUploader 함수 - IE 이하 HTML5 지원 불가 버전을 위한 일반 파일업로드시 

     필요한 부분 변경

sUrl - 업로드 처리를 해줄 CONTROLLER URL 적용

sCallback - callback.html의 경로 지정 

본인의 경우 다음처럼 적용했음

oFileUploader = new jindo.FileUploader(jindo.$("uploadInputBox"),{
	sUrl  : '/file_uploader',	//샘플 켠트롤러입니다.
        sCallback : '/resources/editor/photo_uploader/popup/callback.html',	//업로드 이후에 iframe이 redirect될 콜백페이지의 주소
    	sFiletype : "*.jpg;*.png;*.bmp;*.gif",						//허용할 파일의 형식. ex) "*", "*.*", "*.jpg", 구분자(;)	
    	sMsgNotAllowedExt : 'JPG, GIF, PNG, BMP 확장자만 가능합니다',	//허용할 파일의 형식이 아닌경우에 띄워주는 경고창의 문구
    	bAutoUpload : false,									 	//파일이 선택됨과 동시에 자동으로 업로드를 수행할지 여부 (upload 메소드 수행)
    	bAutoReset : true 											// 업로드한 직후에 파일폼을 리셋 시킬지 여부 (reset 메소드 수행)
})

○ html5Upload 함수 URL 변경 - 드래그앤드롭으로 파일첨부가 가능한 함수이다

sUploadURL변수에 본인이 정한 다중파일업로드 처리 컨트롤러 URL을 정의한다

sUploadURL= '/file_uploader_html5'; 	//upload URL

본인은 위와같이 정해주었다

컨트롤러 + VO에 대한 구조는 다음과 같이 잡아주었으며 각 클래스의 코드는 다음과 같다

/model/Editor.java

public class Editor {
	private MultipartFile Filedata;

	public MultipartFile getFiledata() {
		return Filedata;
	}

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

/controller/EditorController.java

○ 일반 파일업로드의 컨트롤러 - /file_uploader

 @RequestMapping("/file_uploader")
	 public String file_uploader(HttpServletRequest request, HttpServletResponse response, Editor editor){
		 String return1=request.getParameter("callback");
		 String return2="?callback_func=" + request.getParameter("callback_func");
		 String return3="";
		 String name = "";
		 try {
			if(editor.getFiledata() != null && editor.getFiledata().getOriginalFilename() != null && !editor.getFiledata().getOriginalFilename().equals("")) {
	             // 기존 상단 코드를 막고 하단코드를 이용
	            name = editor.getFiledata().getOriginalFilename().substring(editor.getFiledata().getOriginalFilename().lastIndexOf(File.separator)+1);
				String filename_ext = name.substring(name.lastIndexOf(".")+1);
				filename_ext = filename_ext.toLowerCase();
			   	String[] allow_file = {"jpg","png","bmp","gif"};
			   	int cnt = 0;
			   	for(int i=0; i<allow_file.length; i++) {
			   		if(filename_ext.equals(allow_file[i])){
			   			cnt++;
			   		}
			   	}
			   	if(cnt == 0) {
			   		return3 = "&errstr="+name;
			   	} else {
			   		//파일 기본경로
		    		String dftFilePath = request.getSession().getServletContext().getRealPath("/");
		    		//파일 기본경로 _ 상세경로
		    		String filePath = dftFilePath + "resources"+ File.separator + "editor" + File.separator +"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() + name.substring(name.lastIndexOf("."));
					String rlFileNm = filePath + realFileNm;
					///////////////// 서버에 파일쓰기 /////////////////
					editor.getFiledata().transferTo(new File(rlFileNm));
					///////////////// 서버에 파일쓰기 /////////////////
		    		return3 += "&bNewLine=true";
		    		return3 += "&sFileName="+ name;
		    		return3 += "&sFileURL=/resources/editor/upload/"+realFileNm;
			   	}
			}else {
				  return3 += "&errstr=error";
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		 return "redirect:"+return1+return2+return3;
 }

○ HTML5 멀티파일업로드 컨트롤러 - /file_uploader_html5

 @RequestMapping("/file_uploader_html5")
	 public void file_uploader_html5(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[] allow_file = {"jpg","png","bmp","gif"};

			 //돌리면서 확장자가 이미지인지 
			 int cnt = 0;
			 for(int i=0; i<allow_file.length; i++) {
			 	if(filename_ext.equals(allow_file[i])){
			 		cnt++;
			 	}
			 }

			 //이미지가 아님
			 if(cnt == 0) {
				 PrintWriter print = response.getWriter();
				 print.print("NOTALLOW_"+filename);
				 print.flush();
				 print.close();
			 } else {
			 //이미지이므로 신규 파일로 디렉토리 설정 및 업로드	
			 //파일 기본경로
			 String dftFilePath = request.getSession().getServletContext().getRealPath("/");
			 //파일 기본경로 _ 상세경로
			 String filePath = dftFilePath + "resources" + File.separator + "editor" + File.separator +"multiupload" + 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="+"/resources/editor/multiupload/"+realFileNm;
			 PrintWriter print = response.getWriter();
			 print.print(sFileInfo);
			 print.flush();
			 print.close();
			 }	
		} catch (Exception e) {
			e.printStackTrace();
		}
 }

위의 각 종류별로 정상 동작하는지 테스트 해보도록 하자

● 기본 단일 파일업로드

● HTML5 를 이용한 에디터 멀티업로드 실행화면

1. 지속적인 구독을 원하신다면 네이버 이웃추가 부탁드립니다

2. 도움이 되셨다면 공감한번 꾹! 눌러주세요

 

3. 궁금하신점이 있으시다면 댓글 GOGO