thymeLeaf
jsp 파일첨부 관련 참고
narafu
2022. 2. 9. 09:36
<%@ 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>