jsp 파일첨부 관련 참고

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/common/inc/taglib.jsp"%>
<%@ include file="/WEB-INF/views/common/fileUpload.jsp"%>

<!-- Modal :S -->
<div class="dim-layer">
	<div class="dimBg"></div>
	<div id="alert_layer" class="pop-layer">
		<!-- modal 사이즈(미듐사이즈, 클래스명 라지:modal-lg, 미듐:modal-md, 미니사이즈:modal-mini) -->
		<div class="modal-md">
			<!-- modal content -->
			<div class="modal-content">
				<!-- modal header -->
				<div class="modal-header">
					<span class="pop_title">전자결재기안</span>
					<span class="pop_close"><a href="#" id="btn_close" class="close">Close</a></span>
				</div>
				<!--//modal header:End-->
				<!-- modal body -->
				<div class="modal-body">
					<!--View/Form 테이블 :S -->
					<form id="ExchangeVOPOP">
						<input type="hidden" id="templateSeq" name="templateSeq" value="${exchangeVO.templateSeq}" />
						<input type="hidden" id="receiverId" name="receiverId" value="${exchangeVO.receiverId}" />
						<input type="hidden" id="receiverDeptName" name="receiverDeptName" value="${exchangeVO.receiverDeptName}" />
						<input type="hidden" id="receiverDeptId" name="receiverDeptId" value="${exchangeVO.receiverDeptId}" />
						<input type="hidden" id="sessionUserId" value="${exchangeVO.receiverId}" />
						<input type="hidden" id="sessionUserName" value="${exchangeVO.receiverName}" />
						<input type="hidden" id="sessionDeptId" value="${exchangeVO.receiverDeptId}" />
						<input type="hidden" id="sessionDeptName" value="${exchangeVO.receiverDeptName}" />
						<input type="hidden" id="sendUrl" name="sendUrl" value="${exchangeVO.sendUrl}" />
						<input type="hidden" id="resultUrl" name="resultUrl" value="${exchangeVO.resultUrl}" />
						<input type="hidden" id="atchFileCnt" name="atchFileCnt" value="${exchangeVO.atchFileCnt}" />
						<input type="hidden" id="usecaseGbn" name="usecaseGbn" value="${exchangeVO.usecaseGbn}" />
						<input type="hidden" id="userParams" name="userParams" value="${exchangeVO.userParams}" />
						<input type="hidden" id="htmlGroupId" name="htmlGroupId" value="${exchangeVO.htmlGroupId}" />
						<input type="hidden" id="fileGroupId" name="fileGroupId" value="${exchangeVO.fileGrpNo}" />

						<table summary="전자결재기안 등록 테이블입니다." class="tbl_form">
							<caption>전자결재기안 등록</caption>
							<colgroup>
								<col style="width: 16%;">
								<col style="width:;">
							</colgroup>
							<tbody>
								<tr>
									<th>기안제목</th>
									<td>
										<div class="form_inline">
											<input type="text" id="title" name="title" style="width: 100%;" value="${exchangeVO.title}">
										</div>
									</td>
								</tr>
								<tr>
									<th>기안본문</th>
									<td><textarea rows="8" cols="30" id="body" name="body"
											style="width: 100%;">${exchangeVO.body}</textarea>
										<div class="form_group"></div>
									</td>
								</tr>
								<tr>
									<th>자동첨부</th>
									<td>
										<c:if test="${fn:length(htmlFileList) ne 0}">
											<input type="hidden" id="htmlFileList" value='${htmlFileList}'>
											<!-- The container for the uploaded files -->
											<div class="files uploader">
												<ul id="htmlUploadList"></ul>
											</div>
										</c:if>
										<c:if test="${fn:length(htmlFileList) eq 0}">
									    	첨부파일 없습니다.
									    </c:if>
								    </td>
								</tr>
								<tr>
									<th>첨부파일</th>
									<td>
										<c:if test="${fn:length(atchFileList) ne 0}">
											<input type="hidden" id="atchFileList" value='${atchFileList}'>
											<!-- The container for the uploaded files -->
										    <div class="files uploader">
										    	<ul id="atchUploadList"></ul>
										    </div>
									    </c:if>
								     	<c:if test="${fn:length(atchFileList) eq 0}">
									    	첨부파일 없음
									    </c:if>
									</td>
								</tr>
								<tr>
									<th>기안첨부</th>
									<td>
										<input type="hidden" id="fileList" value='${fileList}'>
										<input type="hidden" id="fileGrpNo" name="fileGrpNo" value="${exchangeVO.fileGrpNo}" />
										<input type="hidden" id="atchFileMaxSz" name="atchFileMaxSz" value="40" />
										<input type="hidden" id="atchFilePrmsnCnt" name="atchFilePrmsnCnt" value="5" />
										<input type="hidden" id="atchPrmsnExtn" name="atchPrmsnExtn" value="hwp|pdf|doc|ppt|xls|xlsx|gif|jpg|png" />
										<ul>
											<li><span class="text_note">첨부파일 최대 개수는 '5' 개입니다. </span></li>
											<li><span class="text_note">첨부파일 개별 제한사이즈는 '40'Mbyte 입니다. </span></li>
											<li><span class="text_note">허용된 파일 확장자는 'hwp, pdf, doc, ppt, xls, xlsx, gif, jpg, png' 입니다. </span></li>
										</ul>
										<div class="filebox mt5">
											<div id="filename" class="upload-name " style="background-color: #FCECD0 !important; width: 100%; height: 40px; text-align: center; text-valign: middle;">
												파일 선택 혹은 Drag&Drop 하여 파일을 추가하세요.
											</div>
											<label for="fileupload" class="mt5">파일 선택 </label>
											<input type="file" id="fileupload" name="Filedata" placeholder="파일을 Drag&Drop할 수 있습니다." multiple>
											<!--The container for the uploaded files -->
											<div class="files uploader">
												<ul id="modalUploadList"></ul>
											</div>
											<div id="progressBox" class="mt5" style="display: none;">
												<div id="progress" class="Progress">
													<span class="progress-bar" style="outline: 2px solid transparent; background-color: #b07219; width: 0%;"></span>
												</div>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<th>수신자</th>
									<td>
										<div class="form_inline">
											<input type="text" id="receiverName" name="receiverName" style="width: 40%;" value="${exchangeVO.receiverName}" readonly />
											<button type="button" class="ico_btn_search" title="수신자 조회"
												onclick="fn_userOpen('receiverName', 'receiverId', '${exchangeVO.receiverDeptId}')">수신자 조회</button>
											<span style="line-height: 28px;">
												<input type="checkbox" class="ckb_m" id="setReceiverSelf" onclick="setReceiverSelfChk()" checked>
												<label for="setReceiverSelf">자기 자신일 경우 체크해주세요.</label>
											</span>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</form>
					<!--//View/Form 테이블 :End -->
				</div>
				<!--//modal body :End-->
				<!-- modal footer -->
				<div class="modal-footer">
					<button type="button" class="button btn_pop_basic" title="취소" onclick="$('#btn_close').trigger('click');">취소</button>
					<button type="button" class="button btn_pop_confirm" title="확인" onclick="goExchange()">확인</button>
				</div>
				<!--//modal footer :End-->
			</div>
			<!--//modal content :End-->
		</div>
		<!--//modal 사이즈 :End-->
	</div>
</div>
<!--//Modal :End-->

<script type="text/javascript">

	var htmlFileList = new Array();
	var atchFileList = new Array();
	var fileList = new Array();

	$(function() {
		
		/* html 첨부 */
        if('' != $("#htmlFileList").val() &&  "undefined" != (typeof $("#htmlFileList").val()) ) {
			var json = JSON.parse($("#htmlFileList").val());
			for (idx in json) {
				htmlFileList.push(json[idx]);
			}
			showDefaultFileList('html');
    	}
		
		/* 본문 첨부 */
        if('' != $("#atchFileList").val() &&  "undefined" != (typeof $("#atchFileList").val()) ) {
			var json = JSON.parse($("#atchFileList").val());
			for (idx in json) {
				atchFileList.push(json[idx]);
			}
			showDefaultFileList('atch');
    	}

	});

	function numberWithCommas(x) {
		return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
	}

	/**
	 * 파일목록 생성
	 */
	function showFileList() {
		
		$.views.settings.allowCode(true);
		var template = $.templates("#showFileInfo");
		var html = template.render({
			files : fileList
		}, {
		//viewFileSize: filesize,
		});
		$('#modalUploadList').html(html);
	}

	/**
	 * 자동첨부 파일목록 생성
	 */
	function showDefaultFileList(obj) {
		
		$.views.settings.allowCode(true);
		
		if(obj == 'html') {
			var template = $.templates("#showHtmlFileList");
			var upldList = htmlFileList;
			var upldListId = 'htmlUploadList';
		} else if(obj == 'atch') {
			var template = $.templates("#showFileList");
			var upldList = atchFileList;
			var upldListId = 'atchUploadList';
		} else {
			return;
		}
		
		var html = template.render({
			files : upldList
		}, {
			fnFileNameExtract : function(filename) {
				var str = filename;
				var nameSplit = filename.split("/");
				var splitLen = nameSplit.length;
				if (splitLen > 1) {
					str = nameSplit[splitLen - 1];
				}
				return str;
			},
			fnFileExtensionExtract : function(filename, filetalnm) {
				var str = filetalnm;
				if (str == '') {
					var nameSplit = filename.split("/");
					var splitLen = nameSplit.length;
					if (splitLen > 0) {
						var fname = nameSplit[splitLen - 1];
						var splitVal = fname.split(".");
						if (splitVal.length > 1) {
							str = splitVal[1];
						}
					}
				}
				return str;
			},
			fnFileSize : function(fileSize, fixed) {
				var str

				//MB 단위 이상일때 MB 단위로 환산
				if (fileSize >= 1024 * 1024) {
					fileSize = fileSize / (1024 * 1024);
					fileSize = (fixed === undefined) ? fileSize : fileSize
							.toFixed(fixed);
					str = numberWithCommas(fileSize) + ' MB';
				}
				//KB 단위 이상일때 KB 단위로 환산
				else if (fileSize >= 1024) {
					fileSize = fileSize / 1024;
					fileSize = (fixed === undefined) ? fileSize : fileSize
							.toFixed(fixed);
					str = numberWithCommas(fileSize) + ' KB';
				}
				//KB 단위보다 작을때 byte 단위로 환산
				else {
					fileSize = (fixed === undefined) ? fileSize : fileSize
							.toFixed(fixed);
					str = numberWithCommas(fileSize) + ' byte';
				}
				return str;
			}
		});

		$('#' + upldListId).html(html);
	}

	function goExchange() {
		validation();
	}

	function validation() {

		var title = $('#title');
		var body = $('#body');
		var receiverId = $('#receiverId');

		if (title.val() == '') {
			common.modal.alert('기안제목을 입력하십시요');
			title.focus();
			return;
		}

		if (body.val() == '') {
			common.modal.alert('기안내용을 입력하십시요');
			body.focus();
			return;
		}

		if (receiverId.val() == '') {
			common.modal.alert('수신자는 반드시 입력하셔야 합니다.');
			return;
		}
		
		var atchFilePrmsnCnt = $('#alert_layer #atchFilePrmsnCnt').val();
		if($('#modalUploadList li').length > atchFilePrmsnCnt) {
			common.modal.alert("첨부파일은 최대 " + atchFilePrmsnCnt + "개까지 가능합니다.");
			return;
		}

		var data = $('#ExchangeVOPOP').serialize();
		var url = ctp + '/bdg/' + $('#sendUrl').val() + '.do';
		common.modal.confirm("전송하시겠습니까?", function() {
			common.ajax.post(url, data, function(result) {
				common.modal.alert(result['resultMessage'], function() {
					$('#btn_close').trigger('click');
					location.reload();
				});
			});
		})
	}

	function setReceiverSelfChk() {
		
		var chkF = $('#setReceiverSelf').is(':checked');
		var receiverName = $('#receiverName');
		var receiverId = $('#receiverId');
		var receiverDeptName = $('#receiverDeptName');
 
		if (chkF) {
			receiverName.val($('#sessionUserName').val());
			receiverId.val($('#sessionUserId').val());
			receiverDeptName.val($('#sessionDeptName').val());
		} else {
			receiverName.val('');
			receiverId.val('');
			receiverDeptName.val('');
		}
	}
</script>