네이버 스마트에디터 사진첨부기능을 이용하여 에디터에 이미지 추가하기+다중파일업로드 포함

이전에 스마트 에디터 연동한 후 에디터에 작성한 내용을 서버에 전송하여 받는 내용에 관하여 포스팅을 했었습니다.

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

이어서 에디터 템플릿에 존재하는 사진첨부 기능을 이용하여 에디터내에 이미지 추가하는 기능에 대하여 포스팅 해보도록 하겠습니다.

물론, HTML5 를 이용하는 다중파일업로드까지 스마트에디터에서 구현이 되어있으므로

이부분 역시 작성하도록 하겠습니다.

프레임워크를 사용안하고 일반 jsp만을 이용하므로 별도의 라이브러리가 추가로 필요합니다.

Apache Commons FileUpload 라이브러리 다운로드페이지

http://commons.apache.org/proper/commons-fileupload/download_fileupload.cgi

위에 바이너리 zip 파일을 다운로드 받도록 합니다.

압축 해제 후 lib 디렉토리내에 존재하는 "commons-fileupload-1.3.1.jar"파일을 

본인의 lib 디렉토리내에 라이브러리를 추가합니다.

Apache Commons IO 라이브러리 다운로드 페이지

http://commons.apache.org/proper/commons-io/download_io.cgi

Commons-io 라이브러리 역시 바이너리 zip 파일을 받도록 합니다.

단, Commons-IO 2.4 버전 다운로드를 받으실경우 JDK 1.6 이상일 경우 

 Commons-IO 2.2버전은 JDK 1.5 이상을 다운받으시면 되겠습니다.

역시 압축 해제 후 commons-io-x.x.jar 파일을 프로젝트내 lib 디렉토리내에 해당 라이브러리를 추가합니다.

크롬으로 진행시 자동으로 HTML5를 이용한 다중파일업로드 화면이 출력되므로

싱글업로드를 화면에 띄우기 위해서는 IE10이하에서 진행하시거나

/photo_uploader/popup/attach_photo.js 파일의

약 38번째 줄에 있는 checkDragAndDropAPI 함수내에

if(!!oNavigator.safari && oNavigator.version <= 5){
	bSupportDragAndDropAPI = false;
}else{
	bSupportDragAndDropAPI = true;
}

위와 같은 코드가 있습니다.

 else 부분의 true 값을 false로 변경을 해주시면

 크롬에서도 싱글파일업로드 구현이 가능합니다.

제일먼저 /photo_uploader/popup/photo_uploader.html 파일 열어보면 

<form> 태그가 하나 존재하는데 action에 작성되어있는 url이 의미가 없습니다.

헷갈리지않게 action="FileUploader.php" 이부분을 제거합니다.

다음으로 /photo_uploader/popup/attach_photo.js 파일을 open 하신 후 

코드를 보시면 479번째 라인에 callFileUploader 함수가 있습니다.

이 함수가 싱글파일업로드를 처리하는 함수입니다.

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

위 코드를 다음처럼 변경합니다

file_uploader.jsp 는 별도로 추가해주었고 callback.html 파일은 

이미 smarteditor 코드내에 존재하므로 

본인의 경로에 맞춰서 변경을 해주도록 합니다.

저는 제 환경에 맞춰 다음처럼 변경하였습니다.

sUrl  : '/file_uploader.jsp',	//변경 URL입니다.
sCallback : '/smarteditor/photo_uploader/popup/callback.html',	//업로드 이후에 iframe이 redirect될 콜백페이지의 주소

sUrl에 정의된 페이지는 파일업로드를 처리하는 URL이고

 sCallback은 sUrl에서 파일처리한 다음 파일정보 return 해주는데 

바로 이 return 값들을 callback.html에서 처리를 해주는 것입니다.

이어서 file_uploader.jsp 페이지를 구현해보도록 하겠습니다.

file_uploader.jsp 파일업로드 샘플코드

String return1="";
String return2="";
String return3="";
String name = "";
if (ServletFileUpload.isMultipartContent(request)){
	ServletFileUpload uploadHandler = new ServletFileUpload(new DiskFileItemFactory());
	//UTF-8 인코딩 설정
	uploadHandler.setHeaderEncoding("UTF-8");
	List<fileitem> items = uploadHandler.parseRequest(request);
	//각 필드태그들을 FOR문을 이용하여 비교를 합니다.
	for (FileItem item : items) {
		if(item.getFieldName().equals("callback")) {
			return1 = item.getString("UTF-8");
		} else if(item.getFieldName().equals("callback_func")) {
			return2 = "?callback_func="+item.getString("UTF-8");
		} else if(item.getFieldName().equals("Filedata")) {
			//FILE 태그가 1개이상일 경우
			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();
	    		}
	    		//서버에 업로드 할 파일명(한글문제로 인해 원본파일은 올리지 않는것이 좋음)
	    		String realname = UUID.randomUUID().toString() + "." + ext;
				///////////////// 서버에 파일쓰기 ///////////////// 
				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();
				///////////////// 서버에 파일쓰기 /////////////////
	    		return3 += "&bNewLine=true&sFileName="+name+"&sFileURL=/upload/"+realname;
			}else {
				return3 += "&errstr=error";
			}
		}
	}
}
response.sendRedirect(return1+return2+return3);

위처럼 jsp 코드를 구현 하였습니다.

JSP 페이지에 구현코드의 IMPORT 클래스들은 다음과 같습니다.

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

실행결과는 다음과 같습니다.

에디터 실행

파일업로드 팝업창

파일선택

파일선택완료

에디터 이미지 첨부 적용

이어서  HTML5를 이용한 다중파일업로드를 구현 해보도록 하겠습니다.

attach_photo.js파일에 약 333라인에 html5Upload 함수가 존재합니다.

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

위 변수의 값을 본인이 작성하고자 하는 페이지명으로 정의해주시면 됩니다.

저같은 경우는

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

위와같이 값을 변경해주었습니다.

그럼 변경한 sUploadURL 변수에 대입한 페이지 URL에 대한 파일에 코드를 적용해보도록 하겠습니다.

file_uploader_html5.jsp 다중파일 업로드 샘플코드

String sFileInfo = "";
//파일명 - 싱글파일업로드와 다르게 멀티파일업로드는 HEADER로 넘어옴 
String name = request.getHeader("file-name");
String ext = name.substring(name.lastIndexOf(".")+1);
//파일 기본경로
String defaultPath = request.getServletContext().getRealPath("/");
//파일 기본경로 _ 상세경로
String path = defaultPath + "upload" + File.separator;
File file = new File(path);
if(!file.exists()) {
	file.mkdirs();
}
String realname = UUID.randomUUID().toString() + "." + ext;
InputStream is = request.getInputStream();
OutputStream os=new FileOutputStream(path + realname);
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&sFileName="+ name+"&sFileURL="+"/upload/"+realname;
out.println(sFileInfo);

실행결과는 다음과 같습니다.

※ 만약 싱글파일업로드 진행중 멀티파일 진행하시고자 사진버튼 클릭하였는데 

싱글파일이 나오신다는 분들은 캐쉬문제일 가능성이 있으므로 

새로고침 한번해주시면 되겠습니다.

다중파일 실행결과 입니다.

에디터 실행

다중파일업로드팝업창

파일드래그첨부

파일선택완료

다중파일 에디터 이미지 첨부적용

스프링 관련 에디터 연동 포스팅은 다음에 진행하도록 하겠습니다 .

by 개발로짜