1. 웹 화면
동적으로 업로드 컴포넌트를 처리 할 수 있도록 구현 해주면 됨. (나머진 서블릿에서 처리해줌 )
> 구현 : 첨부 내용 참조 -> 일단 단순하게 처리는 해 놓음. 추가 요건이 있음 구현 해야 겠음.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
Content-type: Preventing XSRF in IE.
-->
<head><meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>FOR TEST :
</title>
<meta name="application-name" content="HTML TEST">
<meta name="description" content="각각 페이지에 맞게 TEST를 진행 바랍니다.">
<meta name="application-url" content="test_.html">
<!--
SCRIPT ZONE
-->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
var Uploader = {
//SET UPLOAD COUNT
DEFAULT_UPLOAD_COUNT : 1 //범위 1 ~ MAX_UPLOAD_COUNT 사이값
, MAX_UPLOAD_COUNT : 5
, ID_PREFIX_DIV : "udiv"
, ID_PREFIX_FILE : "ufile"
, MSG_ERR_LIMIT : function(){
return "최대 " + this.MAX_UPLOAD_COUNT + "개의 파일을 올릴 수 있습니다.";
}
, MSG_ERR_INIT : function(){
return "초기화를 해주시기 바랍니다.\n RUN : Uploader.init( $target ) ";
}
, MSG_UPLOAD : function(){
return "<div id='"+this.ID_PREFIX_DIV+this._serial+"'><input id='"+this.ID_PREFIX_FILE+this._serial+"' name='"+this.ID_PREFIX_FILE+this._serial+"' type='file'>" + "<a href='#' onClick='Uploader.remove(" + this._serial + ")'>[ DEL ]</a><br/></div>";
}
, _target : null
, _uploadCount : 0
, _serial : 0
/**
* INIT UPLOAD
*/
, init : function( $target ){
//SET
this._target = $target;
//GENERATE DEFAULT
for( i=0 ; i<this.DEFAULT_UPLOAD_COUNT ; i++){
this.add();
}
}
/*
* ADD UPLOAD
*/
, add : function(){
//CHECK INIT
if( this._target == null ){
alert( Uploader.MSG_ERR_INIT() );
return false;
}
//CHECK MAX UPLOAD COUNT
if( this._uploadCount >= this.MAX_UPLOAD_COUNT )
{
alert( Uploader.MSG_ERR_LIMIT() );
return false;
}
//ADD
this._target.append( this.MSG_UPLOAD() );
this._uploadCount++;
this._serial++;
return true;
}
/*
* REMOVE UPLOAD
*/
, remove : function( idx ){
//REMOVE
$( "#" + this.ID_PREFIX_DIV + idx ).remove();
this._uploadCount--;
//INIT FIRST INPUT
if( this._uploadCount < 1 )
{
this.add();
}
return true;
}
};
$(function(){
Uploader.init( $("#attachments") );
$("#btnAdd").click(function(){
Uploader.add();
});
});
</script>
<!--
CSS ZONE
-->
<link type="text/css" rel="stylesheet" href="sample.css">
<style type="text/css">
</style>
<body>
<div id="btnAdd">ADD</div>
<div id="attachments" />
</body></html>
2. 서블릿
DB 구성 : 업로드 전용 테이블 구성 & 추가적으로 UNIKEY를 활용하여 JOIN 하여 타 테이블에서 해당 파일을 손쉽게 사용하도록 처리.