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

IT/Smart Editor

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

궁극의 java개발자 2015. 12. 11. 18:12

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

물론, 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);

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

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

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

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

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

에디터 실행