2011. 7. 8. 14:07
IT
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.servlets.com/cos/
- 준비물
jquery.js , jquery.MultiFile.js , WEB-INF/lib/cos.jar
- 등록 페이지
- 서버측
[기타 기록사항]
- 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 를 잘 사용하고 있었고, 중복 파일에 대한 처리기능을 별도로 구현하기 귀찮고... 추가로 필요한 기능은 없어서 기존 코드를 그대로 재사용 했다.
기존 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.servlethttp://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();}</script>
function onUploadDone(msg){
alert(msg);
}
<!-- 업로드용 폼 --><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