JavaScript 활용팁

HOME > WEB > JavaScript 활용팁

2019.06.04 / 19:04

네이버 스마트에디터 사진첨부 기능 에디터 이미지 추가 다중 파일 업로드

탁돌이개발자

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 함수내에

1

2

3

4

5

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 함수가 있습니다.

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

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

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

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

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

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

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

1 2	`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 함수가 존재합니다.

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

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

저같은 경우는

1	`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);