2024-09-23 11:25 파일 속성 작업
This commit is contained in:
myname
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