2024-09-23 11:25 파일 속성 작업
This commit is contained in:
parent
057f5655b7
commit
e11cb02ed6
282
src/main/webapp/WEB-INF/jsp/manager/file/fileAttribute.jsp
Normal file
282
src/main/webapp/WEB-INF/jsp/manager/file/fileAttribute.jsp
Normal file
@ -0,0 +1,282 @@
|
||||
<%@ page contentType="text/html;charset=utf-8" %>
|
||||
<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
|
||||
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
|
||||
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<title><s:message code="manager.file.multiFileList.edit"/></title>
|
||||
<link rel="stylesheet" href="/codemirror/lib/codemirror.css">
|
||||
<link rel="stylesheet" href="/codemirror/addon/dialog/dialog.css">
|
||||
<link rel="stylesheet" href="/codemirror/addon/hint/show-hint.css">
|
||||
<link rel="stylesheet" href="/codemirror/addon/display/fullscreen.css">
|
||||
|
||||
<style>
|
||||
body { margin:0; padding:0; }
|
||||
textarea { border:1px solid #ddd; border-radius:5px; vertical-align:0;font-family:"돋움", "dotum"; font-size:12px;}
|
||||
.CodeMirror {
|
||||
height : 426px;
|
||||
}
|
||||
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
|
||||
.cm-tab {
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
|
||||
background-position: right;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="/css/space.css">
|
||||
|
||||
<!-- theme css -->
|
||||
<link rel="stylesheet" href="/codemirror/theme/3024-day.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/3024-night.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/ambiance.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/base16-dark.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/base16-light.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/blackboard.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/cobalt.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/eclipse.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/elegant.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/erlang-dark.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/lesser-dark.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/mbo.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/midnight.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/monokai.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/neat.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/night.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/paraiso-dark.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/paraiso-light.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/rubyblue.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/solarized.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/the-matrix.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/tomorrow-night-eighties.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/twilight.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/vibrant-ink.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/xq-dark.css">
|
||||
<link rel="stylesheet" href="/codemirror/theme/xq-light.css">
|
||||
<!-- theme css -->
|
||||
|
||||
<script src="/codemirror/lib/codemirror.js"></script>
|
||||
<script src="/codemirror/mode/xml/xml.js"></script>
|
||||
<script src="/codemirror/addon/dialog/dialog.js"></script>
|
||||
<script src="/codemirror/addon/search/searchcursor.js"></script>
|
||||
<script src="/codemirror/addon/search/search.js"></script>
|
||||
<script src="/codemirror/addon/fold/xml-fold.js"></script>
|
||||
<script src="/codemirror/addon/edit/matchtags.js"></script>
|
||||
<script src="/codemirror/addon/edit/closetag.js"></script>
|
||||
<script src="/codemirror/addon/hint/show-hint.js"></script>
|
||||
<script src="/codemirror/addon/hint/xml-hint.js"></script>
|
||||
<script src="/codemirror/addon/hint/html-hint.js"></script>
|
||||
<script src="/codemirror/mode/javascript/javascript.js"></script>
|
||||
<script src="/codemirror/mode/css/css.js"></script>
|
||||
<script src="/codemirror/mode/htmlmixed/htmlmixed.js"></script>
|
||||
<script src="/codemirror/addon/display/fullscreen.js"></script>
|
||||
<script src="/codemirror/mode/clike/clike.js"></script>
|
||||
<script src="/codemirror/keymap/extra.js"></script>
|
||||
<script src="/codemirror/addon/selection/active-line.js"></script>
|
||||
<script src="/codemirror/addon/edit/matchbrackets.js"></script>
|
||||
<script src="/codemirror/addon/zen/zen_codemirror.min.js"></script>
|
||||
<script src="/js/cookie.js"></script>
|
||||
<script src="/js/seed.app.js"></script>
|
||||
<script src="/js/lib/jquery.bxslider.min.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="seed-popup-wrap">
|
||||
<div class="page-title-wrap clear">
|
||||
<div class="page-title-inner">
|
||||
<h3 class="page-title"><s:message code="manager.file.nav"/></h3>
|
||||
<div class="tooltipBox type01">
|
||||
<button type="button" class="page-tip">페이지안내</button>
|
||||
<div class="tooltipText">
|
||||
<p>파일관리</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form:form name="frm" id="frm" method="post" action="/common/proc/${siteIdx}/gtm/multiFileAttributeProc.do">
|
||||
<input type="hidden" name="dirPath" id="dirPath" value="<c:out escapeXml='true' value='${dirPath}' />"/>
|
||||
<input type="hidden" name="fileName" id="fileName" value="<c:out escapeXml='true' value='${fileName}' />"/>
|
||||
<textarea name="fileAttribute" id="fileAttribute" rows="" cols="" style="height:476px; width:99%;"><c:out escapeXml='false' value='${fileAttribute}' /></textarea>
|
||||
|
||||
<div class="layout-footer">
|
||||
<div class="skin-list-box">
|
||||
<label for="layout-skin-list" class="hidden">레이아웃 스킨 선택</label>
|
||||
<select onchange="selectTheme()" id="select" class="layout-skin-list">
|
||||
<option selected>default</option>
|
||||
<option>3024-day</option>
|
||||
<option>3024-night</option>
|
||||
<option>ambiance</option>
|
||||
<option>base16-dark</option>
|
||||
<option>base16-light</option>
|
||||
<option>blackboard</option>
|
||||
<option>cobalt</option>
|
||||
<option>eclipse</option>
|
||||
<option>elegant</option>
|
||||
<option>erlang-dark</option>
|
||||
<option>lesser-dark</option>
|
||||
<option>mbo</option>
|
||||
<option>midnight</option>
|
||||
<option>monokai</option>
|
||||
<option>neat</option>
|
||||
<option>night</option>
|
||||
<option>paraiso-dark</option>
|
||||
<option>paraiso-light</option>
|
||||
<option>rubyblue</option>
|
||||
<option>solarized dark</option>
|
||||
<option>solarized light</option>
|
||||
<option>the-matrix</option>
|
||||
<option>tomorrow-night-eighties</option>
|
||||
<option>twilight</option>
|
||||
<option>vibrant-ink</option>
|
||||
<option>xq-dark</option>
|
||||
<option>xq-light</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
|
||||
///////////////
|
||||
Crtl-E
|
||||
toMatchingTag
|
||||
Ctrl-Space
|
||||
autocomplete
|
||||
///////////////
|
||||
|
||||
/////////////// Search /////////////////
|
||||
Ctrl-F / Cmd-F
|
||||
Start searching
|
||||
Ctrl-G / Cmd-G
|
||||
Find next
|
||||
Shift-Ctrl-G / Shift-Cmd-G
|
||||
Find previous
|
||||
Shift-Ctrl-F / Cmd-Option-F
|
||||
Replace
|
||||
Shift-Ctrl-R / Shift-Cmd-Option-F
|
||||
Replace all
|
||||
/////////////// Search /////////////////
|
||||
|
||||
|
||||
/////////////// Full Screen ////////////
|
||||
F11
|
||||
Full Size
|
||||
ESC
|
||||
Full Not Size
|
||||
/////////////// Full Screen ////////////
|
||||
|
||||
|
||||
/////////// TAB Zen Coding/////////
|
||||
http://docs.emmet.io/abbreviations/syntax/
|
||||
/////////// TAB Zen Coding /////////
|
||||
|
||||
-->
|
||||
|
||||
<div class="btn-area mb5">
|
||||
<button type="submit" class="btn-normal violet"><s:message code="common.button.mod"/></button>
|
||||
<a href="javascript:window.close();" class="btn-normal lightgray"><s:message code="common.button.close"/></a>
|
||||
</div>
|
||||
|
||||
</form:form>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* <![CDATA[ */
|
||||
$("#frm").submit(function(){
|
||||
|
||||
if(!confirm("<s:message code='common.message.item.confirm.mod'/>")){
|
||||
return false;
|
||||
}
|
||||
|
||||
$.blockUI({ message : '<h1><img src="/img/blockbusy.gif" /> <s:message code="common.message.ajaxwait"/></h1>' });
|
||||
});
|
||||
|
||||
var F11key = false;
|
||||
|
||||
$(".CodeMirror").keyup(function(e) {
|
||||
|
||||
if(e.keyCode == "122" || e.keyCode == "27"){
|
||||
if(F11key == false){
|
||||
if(e.keyCode == "122"){ //F11
|
||||
parent.jf_eventF11('Css');
|
||||
F11key = true;
|
||||
}else if(e.keyCode == "27"){ //ESC
|
||||
parent.jf_eventEsc('Css');
|
||||
}
|
||||
}else{
|
||||
parent.jf_eventEsc('Css');
|
||||
F11key = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
CodeMirror.commands.autocomplete = function(cm) {
|
||||
CodeMirror.showHint(cm, CodeMirror.hint.javascript);
|
||||
};
|
||||
|
||||
var editor = CodeMirror.fromTextArea(document.getElementById("fileAttribute"), {
|
||||
value: "<html>\n " + document.documentElement.innerHTML + "\n</html>",
|
||||
mode: "text/html",
|
||||
lineNumbers: true,
|
||||
matchTags: {bothTags: true},
|
||||
extraKeys: {
|
||||
"Ctrl-E": "toMatchingTag",
|
||||
"Ctrl-Space": "autocomplete",
|
||||
"F11": function(cm) {
|
||||
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
|
||||
},
|
||||
"Esc": function(cm) {
|
||||
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
|
||||
}
|
||||
},
|
||||
autoCloseTags: true,
|
||||
styleActiveLine: true,
|
||||
matchBrackets: true,
|
||||
syntax: 'css', /* define Zen Coding syntax */
|
||||
profile: 'xhtml', /* define Zen Coding output profile */
|
||||
|
||||
// send all key events to Zen Coding
|
||||
onKeyEvent: function() {
|
||||
return zen_editor.handleKeyEvent.apply(zen_editor, arguments);
|
||||
}
|
||||
});
|
||||
|
||||
var input = document.getElementById("select");
|
||||
|
||||
function selectTheme() {
|
||||
var theme = input.options[input.selectedIndex].innerHTML;
|
||||
editor.setOption("theme", theme);
|
||||
jf_setCookie("selectTheme", theme);
|
||||
}
|
||||
|
||||
var choice = jf_getCookie("selectTheme");
|
||||
|
||||
if (choice != "") {
|
||||
input.value = choice;
|
||||
editor.setOption("theme", choice);
|
||||
$("#select").val(choice).attr("selected", "selected");
|
||||
}
|
||||
|
||||
function jf_submit(){
|
||||
$("#siteMenuCss").val(editor.getValue());
|
||||
$("#frm").submit();
|
||||
}
|
||||
|
||||
function jf_codeSubmit(){
|
||||
$("#siteMenuCss").val(editor.getValue());
|
||||
}
|
||||
|
||||
function jf_codeSetSubmit(){
|
||||
editor.setValue($("#siteMenuCss").val());
|
||||
}
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
529
src/main/webapp/WEB-INF/jsp/manager/file/fileList.jsp
Normal file
529
src/main/webapp/WEB-INF/jsp/manager/file/fileList.jsp
Normal file
@ -0,0 +1,529 @@
|
||||
<%@ page contentType="text/html;charset=utf-8" %>
|
||||
<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
|
||||
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
|
||||
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<title><s:message code="manager.file.multiFileList.title"/></title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="page-title-wrap clear">
|
||||
<div class="page-title-inner">
|
||||
<h3 class="page-title"><s:message code="manager.file.nav"/></h3>
|
||||
<div class="tooltipBox type01">
|
||||
<button type="button" class="page-tip">페이지안내</button>
|
||||
<div class="tooltipText">
|
||||
<p>파일관리</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-wrap clear">
|
||||
<div class="file-category">
|
||||
<div class="file-find">
|
||||
<form:form name="frm" id="frm" action="/common/proc/${siteIdx}/gtm/multiFileRegProc.do" method="post" enctype="multipart/form-data">
|
||||
<input type="hidden" name="filePath" value="<c:out value='${filePath}' />" />
|
||||
<input type="file" multiple class="hidden" name="upFile" id="upFile" />
|
||||
<label for="upFile">파일 업로드</label>
|
||||
<button type="submit" class="hidden" value="<s:message code="manager.file.multiFileList.button.file"/>">전송</button>
|
||||
</form:form>
|
||||
</div>
|
||||
<!-- 사용자가 추가한 파일 리스트 -->
|
||||
<div class="file-add-list" id="fileAddList">
|
||||
<ul></ul>
|
||||
<button type="button" class="file-submit" id="fileSubmit"><img src="/img/file_submit.png" width="48" height="48" alt="전송" /></button>
|
||||
</div>
|
||||
<!-- 사용자가 추가한 파일 리스트 끝-->
|
||||
<!-- 폴더 리스트 -->
|
||||
<div class="folder-list" id="folderList">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" class="dir" data-path="<c:out value='${highPath}' />"><img src="/img/folder_open.png" width="20" height="15" /><strong>...</strong></a>
|
||||
<c:if test='${!empty dirList}'>
|
||||
<ul class="folder">
|
||||
<c:forEach items="${dirList}" var="dirList">
|
||||
<li><img src="/img/folder_close.png" width="17" height="13" /><a href="#" class="dir" data-path="<c:out value='${filePath}' /><c:out value='${dirList.dirName}' />"><c:out value='${dirList.dirName}' /></a> <a href="/common/proc/<c:out value='${siteIdx}' />/gtm/multiFileDelProc.do?fileType=dir&filePath=<c:out value='${filePath}' />&dirPath=<c:out value='${dirPath}' />&fileName=<c:out value='${dirList.dirName}' />" class="dirDels"><img src="/img/file_close.png" width="9" height="9" alt="<s:message code="manager.file.multiFileList.button.del"/>"></a></li>
|
||||
</c:forEach>
|
||||
</ul>
|
||||
</c:if>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 폴더 리스트 끝-->
|
||||
<!-- 폴더 생성하기 -->
|
||||
<div class="folder-add">
|
||||
<form:form name="frmc" id="frmc" action="/common/proc/${siteIdx}/gtm/multiFileFolderRegProc.do" method="post" >
|
||||
<input type="hidden" name="filePath" value="<c:out value='${filePath}' />" />
|
||||
<input type="hidden" name="dirPath" value="<c:out value='${dirPath}' />" />
|
||||
<label for="folderName"></label><input type="text" class="essential" name="folderName" id="folderName" value="" required style="ime-mode: disabled;">
|
||||
<button type="submit"><s:message code="common.button.folder.create"/></button>
|
||||
</form:form>
|
||||
</div>
|
||||
<!-- 폴더 생성하기 끝-->
|
||||
</div>
|
||||
<div class="file-list table-layout">
|
||||
<table class="scroll">
|
||||
<caption><s:message code="manager.file.multiFileList.table.caption"/></caption>
|
||||
<colgroup>
|
||||
<col style="width:40%;" />
|
||||
<col style="width:10%;" />
|
||||
<col style="width:10%;" />
|
||||
<col style="width:10%;" />
|
||||
<col style="width:10%;" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col"><s:message code="manager.file.multiFileList.fileName"/></th>
|
||||
<th scope="col"><s:message code="manager.file.multiFileList.type"/></th>
|
||||
<th scope="col"><s:message code="manager.file.multiFileList.size"/></th>
|
||||
<th scope="col"><s:message code="manager.file.multiFileList.download"/></th>
|
||||
<th scope="col"><s:message code="manager.file.multiFileList.del"/></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<c:forEach items="${fileList}" var="fileList">
|
||||
<tr>
|
||||
<td class="al"><c:out value='${fileList.fileName}' /></td>
|
||||
<td>
|
||||
<c:choose>
|
||||
<c:when test='${fileList.fileSubType == "css" || fileList.fileSubType == "js" || fileList.fileSubType == "html" || fileList.fileSubType == "htm" || fileList.fileSubType == "txt"}'>
|
||||
<a class="hover-link fileSubType" href="/common/gtm/multiFileAttribute.do?siteIdx=<c:out value='${siteIdx}' />&dirPath=<c:out value='${dirPath}' />&fileName=<c:out value='${fileList.fileName}' />"><span><c:out value='${fileList.fileSubType}' /></span></a>
|
||||
</c:when>
|
||||
<c:otherwise>
|
||||
${fileList.fileSubType}
|
||||
</c:otherwise>
|
||||
</c:choose>
|
||||
</td>
|
||||
<td><c:out value='${fileList.fileSize}' /></td>
|
||||
<td><a href="/common/proc/<c:out value='${siteIdx}' />/gtm/multiFileDownLoad.do?dirPath=<c:out value='${dirPath}' />&fileName=<c:out value='${fileList.fileName}' />"><img src="/img/download-icon.png" width="18" height="14" alt="<s:message code="manager.file.multiFileList.button.download"/>"></a></td>
|
||||
<td><a href="/common/proc/<c:out value='${siteIdx}' />/gtm/multiFileDelProc.do?fileType=file&filePath=<c:out value='${filePath}' />&dirPath=<c:out value='${dirPath}' />&fileName=<c:out value='${fileList.fileName}' />" class="fileDels"><img src="/img/trash.png" width="16" height="18" alt="<s:message code="manager.file.multiFileList.button.del"/>"></a></td>
|
||||
</tr>
|
||||
</c:forEach>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="file-locat"><c:out value='${dirPath}' /></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* <![CDATA[ */
|
||||
;(function( $ ){
|
||||
|
||||
$(".file-wrap .fileSubType").click(function(){
|
||||
var url = $(this).attr("href");
|
||||
window.open(url,"fileSubType","width=900, height=630, resizable=no, location=no, toolbar=no, menubar=no, status=no, scrollbars=yes");
|
||||
return false;
|
||||
});
|
||||
|
||||
var $table = $('table.scroll'),
|
||||
|
||||
$fileAddBox = $('.file-wrap #fileAddList'),
|
||||
|
||||
fileNum = 0,
|
||||
|
||||
attachFiles = null,
|
||||
|
||||
changeFiles = false,
|
||||
|
||||
droppedFiles = false,
|
||||
|
||||
uplodingClose = null,
|
||||
|
||||
isAnimating = false,
|
||||
|
||||
// 파일찾기 부분 form
|
||||
$fileForm = $('.file-wrap #frm');
|
||||
|
||||
isAdvancedUpload = function(){
|
||||
var div = document.createElement( 'div' );
|
||||
return ( ( 'draggable' in div ) || ( 'ondragstart' in div && 'ondrop' in div ) ) && 'FormData' in window && 'FileReader' in window;
|
||||
}(),
|
||||
transEndEventNames = {
|
||||
'WebkitTransition': 'webkitTransitionEnd',
|
||||
'MozTransition': 'transitionend',
|
||||
'OTransition': 'oTransitionEnd',
|
||||
'msTransition': 'MSTransitionEnd',
|
||||
'transition': 'transitionend'
|
||||
},
|
||||
// transition end 이벤트 이름 확인
|
||||
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ];
|
||||
|
||||
// http://stackoverflow.com/questions/1802936/stop-all-active-ajax-requests-in-jquery
|
||||
$.xhrPool = [];
|
||||
$.xhrPool.abortAll = function() {
|
||||
$(this).each(function(idx, jqXHR) {
|
||||
jqXHR.abort();
|
||||
});
|
||||
$.xhrPool = [];
|
||||
};
|
||||
|
||||
$.ajaxSetup({
|
||||
beforeSend: function(jqXHR) {
|
||||
$.xhrPool.push(jqXHR);
|
||||
},
|
||||
complete: function(jqXHR) {
|
||||
var index = $.xhrPool.indexOf(jqXHR);
|
||||
if (index > -1) {
|
||||
$.xhrPool.splice(index, 1);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function init(){
|
||||
// 이벤트
|
||||
initEvents();
|
||||
// FOUC 현상때문에 css에서 숨겨놓았었음.
|
||||
$table.find('tbody').show();
|
||||
}
|
||||
|
||||
var Testing = false;
|
||||
|
||||
function initEvents(){
|
||||
|
||||
var folderMoveEvName = $.browser.mobile ? 'touchstart' : 'dblclick';
|
||||
|
||||
$(window)
|
||||
// tbody > td 크기 지정
|
||||
.off('resize.tbodyScroll').on('resize.tbodyScroll', tbodyScroll)
|
||||
// trigger resize
|
||||
.resize();
|
||||
|
||||
// 폴더 이동
|
||||
$(document)
|
||||
// 파일첨부 이벤트
|
||||
.on('change', '.file-wrap #upFile', fileAttach)
|
||||
.on('click', '.file-submit', function(){
|
||||
$fileForm.trigger('submit');
|
||||
})
|
||||
// 폴더 이동
|
||||
.on(folderMoveEvName, '.file-wrap .dir', function(){
|
||||
location.href = "/common/gtm/multiFileList.do?siteIdx=<c:out value='${siteIdx}' />&filePath=" + $(this).data('path') + '#multiFileList';
|
||||
})
|
||||
// 폴더 삭제
|
||||
.on('click', '.file-wrap .dirDels', function(){
|
||||
return confirm('<s:message code="admin.file.message.folder.confirm"/>') ? true : false;
|
||||
})
|
||||
// 파일 삭제
|
||||
.on('click', '.file-wrap .fileDels', function(){
|
||||
return confirm('<s:message code="admin.file.message.file.confirm"/>') ? true : false;
|
||||
});
|
||||
|
||||
if( isAdvancedUpload && $.browser.desktop) {
|
||||
|
||||
Testing = true;
|
||||
|
||||
$('body').append($('<div></div>',{'class' : 'drag-target overlay', 'id' : 'dragTarget'}))
|
||||
.append($('<div></div>',{'class' : 'file-message', 'id' : 'fileMessage'}));
|
||||
|
||||
$(document).on('submit', '.file-wrap #frm', fileFormSubmit);
|
||||
|
||||
$('#wrapper')
|
||||
.on('drag dragstart dragend dragover dragenter dragleave drop', function( ev ){
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
})
|
||||
// 드래고 마우스 오버
|
||||
.on('dragenter', function( ev ){
|
||||
clearTimeout( uplodingClose );
|
||||
if( !isAnimating ){
|
||||
if( $(ev.target).parents('.file-wrap').length ){
|
||||
$('#dragTarget').addClass( 'is-dragover' );
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#dragTarget')
|
||||
.on('drag dragstart dragend dragover dragenter dragleave drop', function( ev ){
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
})
|
||||
.on('dragleave', function(){
|
||||
$(this).removeClass( 'is-dragover' );
|
||||
})
|
||||
// 드롭
|
||||
.on('drop', function( ev ){
|
||||
|
||||
if( $('#progress').width() > 0 ){
|
||||
alert('파일 전송중 입니다.');
|
||||
}
|
||||
|
||||
var files = ev.originalEvent.dataTransfer.files;
|
||||
|
||||
droppedFiles = files;
|
||||
|
||||
$(this).removeClass( 'is-dragover' );
|
||||
|
||||
if( isAnimating ){
|
||||
return false;
|
||||
}
|
||||
|
||||
showFiles( files, true );
|
||||
|
||||
if( Testing ){
|
||||
$fileForm.trigger('submit');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
|
||||
// ie8, 9
|
||||
$(".file-wrap #frm").submit(function(){
|
||||
$.blockUI({ message : '<h1><img src="/img/blockbusy.gif" /> <s:message code="common.message.ajaxwait"/></h1>' });
|
||||
});
|
||||
|
||||
$(".file-wrap #frmc").submit(function(){
|
||||
|
||||
if($(".file-wrap #folderName").val() == ""){
|
||||
alert("<s:message code="admin.file.multiFileList.folderName"/> <s:message code="common.message.essential"/>");
|
||||
$(".file-wrap #folderName").focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
$.blockUI({ message : '<h1><img src="/img/blockbusy.gif" /> <s:message code="common.message.ajaxwait"/></h1>' });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// http://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-bytes-to-kb-mb-gb-in-javascript
|
||||
function formatBytes(bytes,decimals) {
|
||||
if(bytes == 0) return '0 Byte';
|
||||
var k = 1000;
|
||||
var dm = decimals + 1 || 3;
|
||||
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
||||
var i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
// tbody > td 크기 지정
|
||||
function tbodyScroll(){
|
||||
|
||||
var $table = $('table.scroll');
|
||||
|
||||
var colWidth = 0;
|
||||
|
||||
var $bodyCells = $table.find('thead tr:first').children();
|
||||
|
||||
colWidth = $bodyCells.map(function() {
|
||||
return $(this).outerWidth();
|
||||
}).get();
|
||||
|
||||
$table.find('tbody tr').children().each(function(i, v) {
|
||||
$(v).outerWidth(colWidth[i]).css('min-width', !i ? 200 : 100 );
|
||||
});
|
||||
}
|
||||
|
||||
function showFiles( files, isAjax ){
|
||||
|
||||
if( !$fileAddBox.hasClass('show') && !Testing ){
|
||||
$fileAddBox.addClass('show');
|
||||
}
|
||||
|
||||
var fragment = $(document.createDocumentFragment());
|
||||
$.each(files, function( index, obj ){
|
||||
if( $fileAddBox.find('li:contains('+ obj.name +')').length ){
|
||||
return true;
|
||||
}
|
||||
fragment.append( $('<li></li>').append( '<span>'+ obj.name +'</span>' ).append( isAdvancedUpload ? '<span>' + formatBytes(obj.size) + '</span>' : '' ) );
|
||||
});
|
||||
$fileAddBox.find('ul').append( fragment );
|
||||
}
|
||||
|
||||
function fileAttach( ev ){
|
||||
|
||||
changeFiles = true;
|
||||
|
||||
var files = null;
|
||||
var size = this.files ? this.files[0].size : 0 ;
|
||||
|
||||
if( this.files && this.files.length > 1 ){
|
||||
files = Array.prototype.slice.call(this.files);
|
||||
} else {
|
||||
files = [{name : ev.target.value.split( '\\' ).pop(), size : size}];
|
||||
}
|
||||
|
||||
// ie8, 9
|
||||
if( !isAdvancedUpload ){
|
||||
fileNum++;
|
||||
var newFileInput = $('<input type="file" class="hidden" name="upFile" id="upFile' + fileNum + '">').change( fileAttach );
|
||||
$(this).after( newFileInput );
|
||||
$(this).closest('#frm').find('label').attr('for', 'upFile' + fileNum);
|
||||
}
|
||||
|
||||
if( !!attachFiles ){
|
||||
attachFiles.push(files[0]);
|
||||
} else {
|
||||
attachFiles = files;
|
||||
}
|
||||
|
||||
clearTimeout( uplodingClose );
|
||||
|
||||
showFiles( files, true );
|
||||
|
||||
if( Testing ){
|
||||
// 파일리스트 생성
|
||||
$fileForm.trigger('submit');
|
||||
}
|
||||
}
|
||||
|
||||
function fileFormSubmit( ev ){
|
||||
|
||||
var flag = (!!droppedFiles && changeFiles) || changeFiles;
|
||||
|
||||
var formData = flag ? new FormData( this ) : new FormData();
|
||||
|
||||
if( isAdvancedUpload ){
|
||||
|
||||
ev.preventDefault();
|
||||
|
||||
var size = attachFiles || droppedFiles;
|
||||
|
||||
if( $('#fileMessage').hasClass('is-uploding') ){
|
||||
|
||||
$('#fileMessage').find('strong').text( size.length + '개 파일 업로드 중..' );
|
||||
|
||||
$('#fileMessage').find('.message-body ul').html( $fileAddBox.find('ul').html() );
|
||||
|
||||
} else {
|
||||
|
||||
$('#fileMessage').addClass('is-uploding')
|
||||
.append(
|
||||
$('<div></div>').addClass('message-header')
|
||||
.append(
|
||||
$('<div></div>').addClass('message-progress')
|
||||
)
|
||||
.append(
|
||||
$('<strong></strong>').text( $fileAddBox.find('li').length + '개 파일 업로드 중..' )
|
||||
)
|
||||
.append( $('<button></button>').text( '×' ).click(function( e, error ){
|
||||
|
||||
if( isAnimating && !error ) {
|
||||
if( confirm('업로드가 완료되지 않았습니다. 업로드를 취소하시겠습니까?') ){
|
||||
$.xhrPool.abortAll();
|
||||
}
|
||||
else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if( !!error ){
|
||||
alert('업로드 실패');
|
||||
}
|
||||
|
||||
$(this).closest('#fileMessage').removeClass('show').one(transEndEventName, function(){
|
||||
|
||||
$('#fileMessage').html('');
|
||||
|
||||
$('#fileMessage').removeClass('is-uploding').removeClass('show');
|
||||
|
||||
});
|
||||
|
||||
droppedFiles = false;
|
||||
|
||||
attachFiles = false;
|
||||
|
||||
isAnimating = false;
|
||||
|
||||
$fileAddBox.find('ul').html('');
|
||||
}) ).mouseover(function(){ clearTimeout( uplodingClose ); })
|
||||
)
|
||||
.append(
|
||||
$('<div></div>').addClass('message-body')
|
||||
.append(
|
||||
$fileAddBox.find('ul')[0].outerHTML
|
||||
)
|
||||
)
|
||||
.addClass('show');
|
||||
}
|
||||
|
||||
// 드롭된 파일 있으면 데이터 추가
|
||||
if( !!droppedFiles ){
|
||||
formData.append('filePath', $fileForm.find('input[type="hidden"]').val());
|
||||
$.each( droppedFiles, function( i, file ){
|
||||
formData.append('upFile', file);
|
||||
});
|
||||
}
|
||||
|
||||
var progressDfd = $.Deferred();
|
||||
|
||||
clearTimeout( uplodingClose );
|
||||
|
||||
// ajax request
|
||||
$.ajax({
|
||||
url : $fileForm.attr( 'action' ),
|
||||
type : $fileForm.attr( 'method' ),
|
||||
data : formData,
|
||||
cache : false,
|
||||
contentType : false,
|
||||
processData : false,
|
||||
progress : function( ev ){
|
||||
if( ev.lengthComputable ){
|
||||
var percentComplete = ((ev.loaded / ev.total) * 100);
|
||||
isAnimating = true;
|
||||
$('.message-progress').removeAttr('style').animate({
|
||||
width : percentComplete + '%'
|
||||
}, 0, function(){
|
||||
if( percentComplete >= 100 ){
|
||||
progressDfd.resolve();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
success: function( data ){
|
||||
|
||||
progressDfd.promise().done(function(){
|
||||
|
||||
$table.find('tbody').load(location.href + ' tbody tr', function(){
|
||||
|
||||
// 테이블 크기 재조정
|
||||
tbodyScroll();
|
||||
// 파일리스트 숨김
|
||||
|
||||
$('.message-header').find('strong').text( '업로드 ' + $fileAddBox.find('li').length + '개 완료' );
|
||||
|
||||
isAnimating = false;
|
||||
|
||||
uplodingClose = setTimeout(function(){
|
||||
|
||||
$('#fileMessage').removeClass('show').one(transEndEventName, function(){
|
||||
$('#fileMessage').html('');
|
||||
|
||||
$('#fileMessage').removeClass('is-uploding');
|
||||
});
|
||||
|
||||
droppedFiles = false;
|
||||
|
||||
attachFiles = false;
|
||||
|
||||
$fileAddBox.find('ul').html('');
|
||||
|
||||
}, 3000);
|
||||
|
||||
// 변수 초기화
|
||||
changeFiles = false;
|
||||
|
||||
droppedFiles = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
error: function(){
|
||||
$('#fileMessage button').click('error');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// init
|
||||
init();
|
||||
|
||||
}( jQuery ));
|
||||
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user