2024-09-23 11:25 파일 속성 작업

This commit is contained in:
myname 2024-09-23 11:28:45 +09:00
parent 057f5655b7
commit e11cb02ed6
2 changed files with 811 additions and 0 deletions

View 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" />&nbsp;&nbsp;<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>

View 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&amp;filePath=<c:out value='${filePath}' />&amp;dirPath=<c:out value='${dirPath}' />&amp;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}' />&amp;dirPath=<c:out value='${dirPath}' />&amp;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}' />&amp;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&amp;filePath=<c:out value='${filePath}' />&amp;dirPath=<c:out value='${dirPath}' />&amp;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" />&nbsp;&nbsp;<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" />&nbsp;&nbsp;<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>