아 이놈때문에 반나절 삽질한듯... -_-

일반 싱글 이미지업로드는 성공하였는데 html5 드래그앤드롭에서 삽질시작... 

에디터샘플소스에 이미지 업로드 관련 php 소스는 있지만 java/jsp 소스가 없는거 같아 포스팅 

하도록 한다.

싱글/멀티 이미지 업로드 모두포스팅 하였음!!!

이건 단순 출력물을 뽑기위해 대충 코딩 한것이므로 정리는 알아서들 하시길... ㅜ.ㅜ

스프링으로 파일처리는 쉬운대... ㅠㅠ jsp로 간만에 하려니ㅋㅋ gg.....

우선 지난 포스팅에 이어서 에디터 우측상단을 보게 된다면 사진이라는 버튼이 존재할 것임. 

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

각 브라우저별로 버튼 클릭시 업로드 기능에 대한 유형이 틀리다.

IE11 미만 버전에서는  싱글 멀티파트 업로드화면을 출력시키고

IE11, 크롬, 사파리 등에서는 드래그앤드롭기능으로 멀티파일 업로드(드래그앤드롭) 폼을 출력

시킨다.

commons-fileupload-1.2.2.jar

commons-io-1.4.jar

위 jar파일들을 lib 폴더에 넣도록 하자 

maven 이용자은 dependency 추가하자 (버전은 알아서 맞추자..)

<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>

spring 사용자는 파일처리를 위해 멀티파트 빈을 등록하면 될것이고...

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

이걸로 파일업로드 기초공사는 끝났으니... 에디터 디렉토리 -> photo_uploader -> popup 

디렉토리내의 소스 2가지를 수정해주도록 하자

   해당 form의 action은 무의미 한듯 -_- action="xxxxx" 자체를 삭제!

<form id="editor_upimage" name="editor_upimage" action="FileUploader.php" method="post" enctype="multipart/form-data" onSubmit="return false;>

  변경함수  :  callFileUploader() , html5Upload()

 첫번째로 싱글파일 업로드를 먼저 처리 하도록 하자

 관련 함수는 callFileUploader() 함수이다.

 변경 속성은  sUrl, sCallback이다

 본인은 WebContent경로 바로 밑에 file_uploader.jsp 를 생성하였다.

 위 jsp에 대한 내용은 하단에 기술하도록 하겠음...

 기존 file_uploader.php -> jsp로 변경만 한것뿐이다.

callback.html은 editor -> photo_uploader -> popup -> callback.html 의 경로를 절대경로로 

지정해줌

두가지 속성값을 하단처럼 변경함 

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

다음으로 멀티이미지업로드를 위해 html5Upload() 함수내의 변수값 변경을 하도록 하자

헤더에 정보를 담는거 같은대 .. -0- 그냥 분석까지는 하기 싫으므로 

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

이부분의 url을 jsp로 변경하도록 하자

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

물론 file_uploader_html5.jsp로 WebContent 하단에 파일 생성함

오예 이제 jsp 코드 2개만 작성하면 끝난다!! 

간단하지 않은가~~~ 

import 클래스는 다음과 같다.

<%@page import="java.io.FileOutputStream"%>

<%@page import="java.io.OutputStream"%>

<%@page import="java.io.InputStream"%>

<%@page import="java.util.UUID"%>

<%@page import="java.text.SimpleDateFormat"%>

<%@page import="java.io.File"%>

<%@page import="org.apache.commons.fileupload.FileItem"%>

<%@page import="java.util.List"%>

<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>

<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>

String return1="";
String return2="";
String return3="";
//변경 title 태그에는 원본 파일명을 넣어주어야 하므로
String name = "";
if (ServletFileUpload.isMultipartContent(request)){
	ServletFileUpload uploadHandler = new ServletFileUpload(new DiskFileItemFactory());
	uploadHandler.setHeaderEncoding("UTF-8");
	List<FileItem> items = uploadHandler.parseRequest(request);
	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")) {
			if(item.getSize() > 0) {
				//String name = item.getName().substring(item.getName().lastIndexOf(File.separator)+1);
                // 기존 상단 코드를 막고 하단코드를 이용
                name = item.getName().substring(item.getName().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.getServletContext().getRealPath("/");
		    		//파일 기본경로 _ 상세경로
		    		String filePath = dftFilePath + "editor" + File.separator +"upload" + File.separator;
		    		
		    		File file = null;
		    		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;
					///////////////// 서버에 파일쓰기 ///////////////// 
					InputStream is = item.getInputStream();
					OutputStream os=new FileOutputStream(rlFileNm);
					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";
                                // img 태그의 title 옵션에 들어갈 원본파일명
		    		return3 += "&sFileName="+ name;
		    		return3 += "&sFileURL=/editor/upload/"+realFileNm;
			   	}
			}else {
				  return3 += "&errstr=error";
			}
		}
	}
}
response.sendRedirect(return1+return2+return3);

하단은 멀티이미지업로드를 위한 샘플 코드이다 

import 클래스는 다음과 같다.

<%@page import="java.io.*"%>

<%@page import="java.util.UUID"%>

<%@page import="java.text.SimpleDateFormat"%>

//파일정보
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) {
	out.println("NOTALLOW_"+filename);
} else {
//이미지이므로 신규 파일로 디렉토리 설정 및 업로드	
//파일 기본경로
String dftFilePath = request.getServletContext().getRealPath("/");
//파일 기본경로 _ 상세경로
String filePath = dftFilePath + "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";
//sFileInfo += "&sFileName="+ realFileNm;;
// img 태그의 title 속성을 원본파일명으로 적용시켜주기 위함
sFileInfo += "&sFileName="+ filename;;
sFileInfo += "&sFileURL="+"/editor/multiupload/"+realFileNm;
out.println(sFileInfo);
}

이걸로 에디터 + 이미지 업로드 연동 끝!!! 

spring framework는 좀더 심플한대.... 연동 성공하시길 빌겠습돠~ 

실행동작을 보고 스마트에디터 연동은 이걸로 끝~

아하~ 잘 연동되는것이 확인되었다 ^^