[javascript] FileUpload using jQuery and com.oreilly.servlet

Cross Platform을 위해 기존 파일 업로드 모듈을 변경하게 되었다. 

기존 ActiveX 모듈이 제공하는 기능은 다음과 같다.
- Drag & Drop 
- 첨부갯수, 용량제한 지원
- 이미지 업로드 연계 (게시판에서 전달한 인자를 이용하여 추가 업로드 수행)
- 첨부제외 파일 확장자 리스트 지원
- 업로드시 프로그레스 바 제공
- 다운로드시 일괄 파일저장 기능 제공 

우선 웹표준을 적용할때 제공할 수 없는 것을 정리해보면
- Drag & Drop ( 로컬 파일에 대해서는 보안위배사항)
- 용량제한 확인 불가 (역시 로컬 접근이 안되므로 서버 측에서 검사해야함)
- 이미지 업로드 연계 불가 ( file type 의 input 은 value 값이 readOnly 다. 역시 보안상의 이유)
- 프로그레스바 미제공 (이건 좀 찾아보면 나올지도... )
- 일괄파일 저장 기능 미지원 ( 이것도 좀 트릭을 쓰면 될지도... )

하여튼 이런저런 시간 낭비를 거쳐 마침내 대충 정리했다. 

적용 솔루션은 다음과 같다.
1. UI : jquery , multiple-file-upload plugin 
http://www.jquery.com 

http://www.fyneworks.com/jquery/multiple-file-upload
 

2. Server : com.oreilly.servlet
http://www.servlets.com/cos/

- 준비물 
jquery.js , jquery.MultiFile.js , WEB-INF/lib/cos.jar

- 등록 페이지

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.MultiFile.js"></script>
<script>

function upload(){
        var fileTags = document.body.getElementsByTagName('input');

var arr = new Array();

var cnt = 0;

for (var tg = 0; tg< fileTags.length; tg++) {

   var tag = fileTags[tg];

   if (tag.name =='Filename') {

    tag.name = tag.id;   // tag.name이 모두 Filename 으로 된 것을 바꾸도록 처리함 (MultiFile.js 의 버그? )

    }

}
        document.getElementById("frmFile").submit(); 

}
function  onUploadDone(msg){
   alert(msg);
} 

</script>
<!-- 업로드용 폼 --> 

<form name="frmFile" action="your_server_page" 

    id="frmFile" method="post" 

    target="upload_target" encoding="multipart/form-data" enctype="multipart/form-data">

    <!-- 업로드용 file input -->

    <input class="multi"  type="file"  id="Filename" name="Filename"
              accept="jpg|png|gif|tif|xls|doc|hwp|int|zip" style="width:400">
    <!-- 업로드 타겟용 frame --> 

    <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;">
    <input  type="button" value="upload" onclick="upload();"/>
</iframe>

- 서버측

<%@ page language="java" contentType="text/html; charset=utf-8" import="com.oreilly.servlet.*" %>
<%
String fileDir = "/upload";
String encoding = "euc-kr";

int attachSize = 1; // Megabyte
String retVal = "":
if(request.getContentLength()>attachSize* 1024 * 1024){
        retVal = "upload file size is over";
}else{
        MultipartRequest mr = new MultipartRequest(request, fileDir, request.getContentLength(),encoding,new DefaultFileRenamePolicy());

        Enumeration fileNames = mr.getFileNames();

        List fileInputNames = new ArrayList();

        while(fileNames.hasMoreElements()) {  

         String str = fileNames.nextElement().toString();

                fileInputNames.add(str);

        }

        for(int i=0;i<fileInputNames.size();i++){
                String inputName = (String)fileInputNames.get(i);
                String fileNm = mr.getFilesystemName(inputName);
                File file = mr.getFile(inputName);
                String orgFileName = mr.getOriginalFileName(inputName);
                retVal += fileName +" ";
        }

}
out.print("<script>parent.onUploadDone('" + retVal + "');</script>"); 
%>

[기타 기록사항]
- ajax form 비정상 작동 : ajax form 을 이용하려고 했으나 어떤 이유인지 모르지만 정상적으로 파일을 전달하지 못했다. 별수없이 iframe을 직접 작성했다. 
- multifile.js 의 name 동일성 문제 : id는 XXX1, XXX2 처럼 늘어나는데 name은 XXX, XXX 로 되는 버그가 있다. 
- file type의 input은 보안상의 이유로 value 값을 readonly로만 지원한다. 따라서 외부 게시판을 이용한 이미지 업로드 와 같은 기능은 적용할 수 없다.
- cos.jar 대신에 apache common-fileupload 를 이용하는 경우도 많은데, 내 경우에는 이미 기존에 cos.jar 를 잘 사용하고 있었고, 중복 파일에 대한 처리기능을 별도로 구현하기 귀찮고... 추가로 필요한 기능은 없어서 기존 코드를 그대로 재사용 했다.
 

 

Ctrl+c