/** * 에디터 파일 업로드를 활용한 파일 업로더 * $.initFileUpload(options, [createDom]) */ ; (function($) { var defaults = { imageDivClass : 'imageBox', toolBarDivClass : 'toolBarBox', inputFileId : 'inputFileId', hiddenFileName : 'hiddenFileName', pageNum : 1, progress : 'progress', maxSize : 1, // 첨부파일 등록개수 fileAllowedTypes: ['*'], // 확장자 체크 ['png', 'pdf'] fileMaxSize: 2048, // 첨부파일 사이즈 MB단위 keyEvent: false, toolBar: true, toolBarOption: { wheelZoom : true, zoomIn : true, zoomOut : true, leftRotate : true, rightRotate : true, imgPrint : true, paging : true, draggable : true, download : true, fullScreen : true } } $.initImageViewerFileUpload = function(options) { options = $.extend({}, defaults, options); if( options.toolBar ) { //imageViewer toolBar 생성 var $img = $('.' + options.imageDivClass).find('img').eq(0); fncCreateToolBar($img, options); } // hiddenFileName 변경 이벤트 $('input[name="' + options.hiddenFileName + '"]').on('change', function() { fncSelectFile($(this).val()); }); // 기존파일 데이터 조회 var hiddenId = $('input[name="' + options.hiddenFileName + '"]').val(); if (hiddenId != null && hiddenId != '') { fncSelectFile(hiddenId); } // fileId로 데이터 조회 function fncSelectFile(hiddenId) { $.ajax({ method : "POST", url : CONTEXT_PATH + "/editor/fileList.do", data : { fileId : hiddenId }, beforeSend:function(){ $.unblockUI(); $.blockUI(); } }).done(function(data) { // 파일 데이터 생성 for (var i = 0; i < data.length; i++) { var html = data[i]; if( "pdf, tif, tiff, png, jpg, jpeg".indexOf(html.fileExtsn.toLowerCase()) > -1 ) { var img = $('.' + options.imageDivClass).find('img').eq(0); //tiff, tif, pdf, png, jpg 등의 해당페이지에 대한 이미지 생성 및 호출 img.attr('src', '/multiImageview.do?fileId=' + html.fileId + '&pageSn=' + options.pageNum) .data('file', html.fileId) .data('maxpage', fileMaxPage(img)) .data('curpage', options.pageNum) .on("contextmenu", function() { return false; }); } else { $.unblockUI(); } // 이벤트 추가(파일삭제) fncFileTrigger(html); } }).fail(function(err) { // console.log ('file delete problem: ' + JSON.stringify(err)); }) } // 갯수제한 fncMaxLength(options); // 특정 파일 확장자만 지정 if( options.fileAllowedTypes.indexOf('*') == -1 ) { var ext = ''; $(options.fileAllowedTypes).each(function(i) { if( i > 0 ) { ext += ","; } ext += '.' + this; }); $('#' + options.inputFileId).attr('accept', ext); } // input file 업로드 이벤트 $('#' + options.inputFileId).on('change', function() { if ($(this).val()) { fncFileUp(options); } }); // input file 설정 var fileTarget = $('.filebox .upload-hidden'); fileTarget.on('change', function() { // 값이 변경되면 if (window.FileReader) { // modern browser var filename = $(this)[0].files[0].name; } else { // old IE var filename = $(this).val().split('/').pop().split('\\').pop(); // 파일명만 // 추출 } // 추출한 파일명 삽입 $(this).siblings('.upload-name').val(filename); }); // 파일 업로드 var fncFileUp = function(options) { var data = new FormData(); var file = $('#' + options.inputFileId)[0].files[0]; // 확장자 및 용량체크 if( !fncValidate(options, file) ) { return; }; data.append("file", file); $.ajax({ type : 'post', url : CONTEXT_PATH + '/editor/uploadFile.do', data : data, processData : false, contentType : false, beforeSend:function(){ $.blockUI(); }, success : function(html) { // FileUploadInterceptor에서 필러링 처리 if( html.fileId == null ) { $('#' + options.inputFileId).val(""); alert ('허용되지 않은 확장자입니다.'); return; } if( "pdf, tif, tiff, png, jpg, jpeg".indexOf(html.fileExtsn.toLowerCase()) > -1 ) { var img = $('.' + options.imageDivClass).find('img').eq(0); //tiff, tif, pdf, png, jpg등 의 해당페이지에 대한 이미지 생성 및 호출 img.attr('src', '/multiImageview.do?fileId=' + html.fileId + '&pageSn=1') .data('file', html.fileId) .data('maxpage', fileMaxPage(img)) .data('curpage', 1) .on("contextmenu", function() { return false; }); } else { $.unblockUI(); } // 이벤트 추가(파일삭제) fncFileTrigger(html); var atch_id = $('input[name="' + options.hiddenFileName + '"]').val(); if (atch_id.length == 0) { atch_id = html.fileId; } else { atch_id = atch_id + "," + html.fileId; } $('input[name="' + options.hiddenFileName + '"]').val(atch_id); $('#' + options.inputFileId).val(""); // 갯수제한 fncMaxLength(options); }, error : function(error) { alert("파일 업로드에 실패하였습니다."); console.log(error); console.log(error.status); $.unblockUI(); }, // xhr : function() { // 프로그래스 // var xhr = new window.XMLHttpRequest(); // // 업로드 중 프로그래스바 표시 // $('#' + options.progress).removeAttr('style'); // $('#' + options.progress).find('.progress-bar').attr('style', 'width: 0%'); // $('#' + options.progress).find('.progress-bar').text('0%'); // // xhr.upload.addEventListener("progress", function(evt) { // if (evt.lengthComputable) { // var percentComplete = evt.loaded / evt.total; // percentComplete = parseInt(percentComplete * 100); // // // 프로그래스바 이동 // $('#' + options.progress).find('.progress-bar').attr('style', 'width: ' + percentComplete + '%'); // $('#' + options.progress).find('.progress-bar').text(percentComplete + '%'); // // if (percentComplete === 100) { // $('#' + options.progress).attr('style', 'display: none;'); // } // } // }, false); // // return xhr; // }, }); } // 파일 이벤트 추가 var fncFileTrigger = function(html) { //파일 삭제 // $('#' + options.inputFileId).closest('div').find('a:eq(0)').on('click', function() { $('#' + options.inputFileId).next().off(); $('#' + options.inputFileId).next().on('click', function() { fncUnlink(options, html.link); }); } // 링크 삭제(파일 삭제) var fncUnlink = function(options, link) { $.ajax({ // Request method. method : "POST", // Request URL. url : CONTEXT_PATH +"/editor/deleteFile.do", // Request params. data : { src : link } }).done(function(data) { // console.log ('file was deleted'); // 링크 삭제시 파일 목록 삭제 if (options.fileListDivId != '') { var atch_id = $('input[name="' + options.hiddenFileName + '"]').val(); var new_atch_id = ""; for (i = 0; i <= atch_id.split(',').length - 1; i++) { if (atch_id.split(',')[i] != data.fileId) { if (atch_id.split(',').length != 1) { if (new_atch_id == "") { new_atch_id = atch_id.split(',')[i]; } else { new_atch_id = new_atch_id + "," + atch_id.split(',')[i]; } } } } // 이미지 삭제 $('.' + options.imageDivClass).find('img').eq(0).attr('src', ''); // 실제 넘기는 파일(hidden파일) $('input[name="' + options.hiddenFileName + '"]').val(new_atch_id); // 업로드된 파일명 제거 $('.filebox .upload-hidden').siblings('.upload-name').val("파일선택"); // 갯수제한 fncMaxLength(options); } }).fail(function(err) { // console.log ('file delete problem: ' + JSON.stringify(err)); }) } }; // 개수 제한 var fncMaxLength = function(options) { var atch_id = $('input[name="' + options.hiddenFileName + '"]').val(); var size = atch_id.split(',').length; if( atch_id.length == 0 ) { size = 0; } if( options.maxSize > size ) { $('#' + options.inputFileId).prop('disabled', false); } else { $('#' + options.inputFileId).prop('disabled', true); } } // 확장자 체크 및 용량 체크 var fncValidate = function(options, file) { if( options.fileAllowedTypes.indexOf('*') == -1 ) { var ext = file.name.split('.').pop().toLowerCase(); if( $.inArray(ext, options.fileAllowedTypes) == -1 ) { alert('허용되지 않은 확장자입니다.'); $('#' + options.inputFileId).val(""); return false; } } if( options.fileMaxSize > -1 ) { var fileSize = file.size; var maxSize = options.fileMaxSize * 1024 * 1024; if( fileSize > maxSize ) { alert('파일 사이즈는 ' + fileSizeConvert(maxSize) + '이내로 등록 가능합니다.'); $('#' + options.inputFileId).val(""); return false; } } return true; } // 페이지 이벤트 var fncPageTrigger = function(method, img) { var fileId = img.data('file'); var maxPage = parseInt(img.data('maxpage')); var curPage = parseInt(img.data('curpage')); if( fileId != null ) { if (method == 'prev') { if (curPage == 1) { alert("첫페이지 입니다."); return } else { curPage--; img.data('curpage', curPage); } } else if (method == 'next') { if (maxPage == curPage) { alert("최대페이지 입니다."); } else { curPage++; img.data('curpage', curPage); } } else { if (curPage < 1) { alert("0페이지는 이동할 수 없습니다."); return } else if (curPage > maxPage) { alert("최대페이지를 초과할 수 없습니다."); return } } //tiff, tif, pdf, png, jpg등 의 해당페이지에 대한 이미지 생성 및 호출 $.blockUI(); img.attr('src', '/multiImageview.do?fileId=' + fileId + '&pageSn=' + curPage); } } //tiff, tif, pdf, png, jpg 확장자일 경우 전체 페이지 가져오기 var fileMaxPage = function (img) { var returnValue; var fileId = img.data('file'); $.ajax({ // Request method. method : "POST", // Request URL. url : "/editor/fileMaxSizeInfo.do", // Request params. data : {fileId: fileId}, async: false, }).done(function(totalPage) { returnValue = totalPage; }).fail(function(err) { // console.log ('file delete problem: ' + JSON.stringify(err)); }) return returnValue; } // 이미지 전체화면 이벤트 var fncFullScreen = function (img) { var imgCommonPreview = new Image(); imgCommonPreview.src= img.attr('src'); setTimeout( function () { fncCreatePreviewWin(imgCommonPreview); }, 100); } // 이미지 원본 팝업 호출 var fncCreatePreviewWin = function (imgCommonPreview) { if(!imgCommonPreview.complete) { setTimeout( function () { fncCreatePreviewWin(imgCommonPreview); }, 100); return; } var scrollsize = 17; var swidth = screen.width - 10; var sheight = screen.height - 90; var wsize = imgCommonPreview.width var hsize = imgCommonPreview.height; if(wsize < 50) wsize = 50; // 가로 최소 크기 if(hsize < 50) hsize = 50; // 세로 최소 크기 if(wsize > swidth) wsize = swidth; // 가로 최대 크기 if(hsize > sheight) hsize = sheight; // 세로 최대 크기 // 세로가 최대크기를 초과한경우 세로스크롤바 자리 확보 if((wsize < swidth-scrollsize) && hsize >= sheight) wsize += scrollsize; // 가로가 최대크기를 초과한경우 가로스크롤바 자리 확보 if((hsize < sheight-scrollsize) && wsize >= swidth) hsize += scrollsize; // IE 6,7 전용 : 가로세로 크기가 보통일때 세로 스크롤바 자리 확보 if((wsize < swidth-scrollsize) && hsize < sheight && (navigator.userAgent.indexOf("MSIE 6.0") > -1 || navigator.userAgent.indexOf("MSIE 7.0") > -1)) wsize += scrollsize; // 듀얼 모니터에서 팝업 가운데 정렬하기 var mtWidth = document.body.clientWidth; // 현재 브라우저가 있는 모니터의 화면 폭 사이즈 var mtHeight = document.body.clientHeight; // 현재 브라우저가 있는 모니터의 화면 높이 사이즈 var scX = window.screenLeft; // 현재 브라우저의 x 좌표(모니터 두 대를 합한 총 위치 기준) var scY = window.screenTop; // 현재 브라우저의 y 좌표(모니터 두 대를 합한 총 위치 기준) var popX = scX + (mtWidth - wsize) / 2 - 50; // 팝업 창을 띄울 x 위치 지정(모니터 두 대를 합한 총 위치 기준) var popY = scY + (mtHeight - hsize) / 2 - 50; // 팝업 창을 띄울 y 위치 지정(모니터 두 대를 합한 총 위치 기준) // window.open('주소', '이름(공란가능)', '속성'); imageWin = window.open("", "", "top=" + popY + ",left=" + popX + ",width=" + wsize + ",height=" + hsize +",scrollbars=yes,resizable=yes,status=no,fullscreen=yes"); imageWin.document.write("Preview"); imageWin.document.write(""); imageWin.document.write(""); } //이미지 Viewer option에 따른 버튼생성 var fncCreateToolBar = function (img, options) { img.load(function() { $(this).css('visibility', 'visible'); // 이미지 뷰어 페이징 if( options.toolBarOption.paging ) { var maxPage = $(this).data('maxpage'); var curPage = $(this).data('curpage'); $('.'+options.toolBarDivClass).find('.curPage').val(curPage); $('.'+options.toolBarDivClass).find('.maxPage').html(maxPage); } // 이미지 로드 시 버튼 활성화 $('.'+options.toolBarDivClass).find('button, input').removeClass('disabled').prop('disabled', false); // noimage class 삭제 $('.'+options.imageDivClass).removeClass('no_img'); // 권한체크 fncAuthoChecker(); // 로딩종료 $.unblockUI(); }); img.on('error', function(error) { // 최초 이미지 없을때 에러가 아닌 이미지 로드중에 난 에러 체크 if( error.target.baseURI.indexOf(error.target.src) == -1 ) { alert("이미지를 로딩하는 중 에러가 발생하였습니다."); // 로딩종료 $.unblockUI(); } // 이미지 없을 시 버튼 비활성화 $('.'+options.toolBarDivClass).find('button, input').addClass('disabled').prop('disabled', true); // 파일은 있으나 미리보기 지원이 안되는 확장자일 경우 if( $('#'+options.hiddenFileName).val() != '' ) { $('.fileDown').removeClass('disabled').prop('disabled', false); } // 이미지 페이징 초기화 $('.'+options.toolBarDivClass).find('.curPage').val(0); $('.'+options.toolBarDivClass).find('.maxPage').html(0); // noimage class 추가 $('.'+options.imageDivClass).addClass('no_img'); }); // 휠 확대 축소 if (options.toolBarOption.wheelZoom) { img.on('mousewheel DOMMouseScroll', function(e) { var E = e.originalEvent; if( E.wheelDelta > 0 ) { // 확대 img.fncZoom(1.2); } else { // 축소 img.fncZoom(0.8); } }); } // 이미지 확대 if (options.toolBarOption.zoomIn) { var dom = '
  • ' + '' + '
  • '; $(dom).appendTo('.' + options.toolBarDivClass).on('click', function() { img.fncZoom(1.2); }); } // 이미지 축소 if (options.toolBarOption.zoomOut) { var dom = '
  • ' + '' + '
  • '; $(dom).appendTo('.' + options.toolBarDivClass).on('click', function() { img.fncZoom(0.8); }); } // 왼쪽 회전 if (options.toolBarOption.leftRotate) { var dom = '
  • ' + '' + '
  • '; $(dom).appendTo('.' + options.toolBarDivClass).on('click', function() { img.fncRotate(-90); }); } // 오른쪽 회전 if (options.toolBarOption.rightRotate) { var dom = '
  • ' + '' + '
  • '; $(dom).appendTo('.' + options.toolBarDivClass).on('click', function() { img.fncRotate(90); }); } // 파일 다운로드 if( options.toolBarOption.download ) { var dom = '
  • ' + '' + '
  • '; $(dom).appendTo('.' + options.toolBarDivClass).on('click', function() { var fileId = $('#'+options.hiddenFileName).val(); if( fileId.indexOf(',') > -1 ) { location.href = "/multiDownload.do?fileId=" + fileId; } else { location.href = CONTEXT_PATH +"/download.do?fileId=" + fileId; } }); } // 이미지 인쇄 if( options.toolBarOption.imgPrint ) { // 인쇄 권한 변경해야됨 var dom = '
  • ' + '' + '
  • '; if( img.attr('id') == undefined ) { img.attr('id', 'img' + new Date().getTime()); } $(dom).appendTo('.' + options.toolBarDivClass).on('click', function() { var imgId = img.attr('id'); var maxpage = img.data('maxpage'); if( maxpage >= 100 ) { alert('최대 크기가 100페이지 이상인 문서는 인쇄하실 수 없습니다.\n파일을 다운로드 후 인쇄하여 주시기 바랍니다.'); return; } var frmObj = $('
    ', {'id': 'frmprint' + imgId, 'action': '/imagePrint/A3.do', 'method': 'POST', 'target': '_blank'}); var inputObj = $('', {'name': 'fileList[0].fileId', 'value': img.data('file')}); frmObj.append(inputObj); $(document.body).append(frmObj); $('#frmprint' + imgId).submit(); $('#frmprint' + imgId).remove(); }); } // 이미지 뷰어 페이징 if( options.toolBarOption.paging ) { var dom = '
  • ' + '
    ' + '' + '' + ' / 0' + '' + '' + '
    ' + '
  • '; $(dom).appendTo('.' + options.toolBarDivClass) .find('button:eq(0)').on('click', function() { fncPageTrigger('prev', img); }).end() .find('button:eq(1)').on('click', function() { fncPageTrigger('next', img); }).end() .find('button:eq(2)').on('click', function() { fncPageTrigger('move', img); }).end() .find('input[type=text]').on('keydown keyup focusout', function(event) { onlyNumber(this); if( event.keyCode == 13 ) { var maxPage = parseInt(img.data('maxpage')); var curPage = parseInt($(this).val()); curPage = isNaN(curPage) ? 1 : curPage; if (curPage < 1) { alert("0페이지는 입력할 수 없습니다."); curPage = 1; } else if (curPage > maxPage) { alert("최대페이지를 초과할 수 없습니다."); curPage = maxPage; } $(this).val(curPage); img.data('curpage', curPage); fncPageTrigger('move', img); $(this).blur(); } }); // 방향키로 페이지 전환 if( options.keyEvent ) { $(document).on('keydown', function(event) { if( event.keyCode === 39 ) { fncPageTrigger('next', img); } if( event.keyCode === 37 ) { fncPageTrigger('prev', img); } }); } } // 이미지 전체화면 if( options.toolBarOption.fullScreen ) { var dom = '
  • ' + '' + '
  • '; $(dom).appendTo('.' + options.toolBarDivClass).on('click', function() { // fncFullScreen(img); // URL호출로 변경 // var fileId = $('#'+options.hiddenFileName).val(); var fileId = img.data('file'); var curpage = img.data('curpage'); window.open("/com/imageViewFullScreen.do?fileId=" + fileId + "&curPage=" + curpage, fileId, "top=0,left=0,width=" + screen.width + ",height=" + screen.height +",scrollbars=yes,resizable=yes,status=no,fullscreen=yes"); }); } // 이미지 드래그 if( options.toolBarOption.draggable ) { // 드래그 enable img.draggable({ cursor : "move", scroll: true, stop: function() { // 범위 밖으로 드래그 했을때 보정 var topLoc = parseInt($(this).css('top').replace('px', '')); var leftLoc = parseInt($(this).css('left').replace('px', '')); $(this).animate({ top: topLoc > 0 ? 0 : topLoc, left: leftLoc > 0 ? 0 : leftLoc }, 200); } }); } // 이미지 크기 $.fn.fncZoom = function(size) { if( size < 1.0 && img.width() < 300 ) { return; } this.stop().animate({ width: img.width() * size, height: img.height() * size }, 500); } // 이미지 회전 $.fn.fncRotate = function(moveAngle) { //현재 각도 구하기 function calculateDeg(selector){ var tr = $(selector).css('transform'); if(tr == "none") { return 0; } var values = tr.split('(')[1].split(')')[0].split(','); var a = values[0]; var b = values[1]; var c = values[2]; var d = values[3]; var scale = Math.sqrt(a*a + b*b); var sin = b/scale; var angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); angle = (Math.ceil( angle / moveAngle)) * moveAngle; return angle; } var nowAngle = calculateDeg(this); var op = ''; switch( moveAngle + nowAngle ) { case 90: op = ' translateY(-100%)'; break; case 180: op = ' translate(-100%,-100%)'; break; case 270: op = ' translateX(-100%)'; break; case -90: op = ' translateX(-100%)'; break; case -180: op = ' translate(-100%,-100%)'; break; case -270: op = ' translateY(-100%)'; break; } this.stop().animate({transform: moveAngle}, { step: function(now,fx) { now += nowAngle; $(this).css({ 'transform-origin': 'top left', /* IE 10+, Firefox, etc. */ '-webkit-transform-origin': 'top left', /* Chrome */ '-ms-transform-origin': 'top left', /* IE 9 */ 'transform':'rotate('+now+'deg)' + op, '-webkit-transform':'rotate('+now+'deg)' + op, '-ms-transform':'rotate('+now+'deg)' + op, }); }, }); } } })(jQuery); // 파일 사이즈 변경 function fileSizeConvert(size) { var fileSize = size; if (fileSize / 1024 >= 1024) { fileSize = (fileSize / (1024 * 1024)).toFixed(1) + "MB"; } else { fileSize = (fileSize / 1024).toFixed(1) + "KB"; } return fileSize; } // 인쇄 callback 함수 function printCallback(params) { var url = "/dta/doc/outputHistManage/regist.do"; var aJson = { outptMg: params.outptMg }; var dataTable = $('#dta-recpt-list').DataTable(); var rowcollection = dataTable.$('input[type="checkbox"]:checked', {"page": "current"}); // 상세, 건별수정, 건별등록 시 작동 $(params.fileList).each(function(i, data) { var fileId = $('#fileId').val(); var dtaRceptId = $('#dtaRceptId').val(); if( fileId == data ) { aJson['dtaRceptList[' + i + '].dtaRceptId'] = dtaRceptId; } }); $.post(url, aJson, function(data) { if( data != "success" ) { alert('에러가 발생하였습니다.\n관리자에게 문의하세요.'); } }); } //Invalid property 'columns[0][search][regex]' of bean class [demo.objects.DataTableRequestDTO]: Property referenced in indexed property path 'columns[0][search][regex]' is neither an array nor a List nor a Map; returned value was [false function planify(data) { for (var i = 0; i < data.columns.length; i++) { column = data.columns[i]; column.dtaRceptId = column.search.regex; column.searchValue = column.search.value; delete(column.search); } }