/** * Ajax 파일 업로드 * $(input file element).ajaxFileUpload(options, [callback]) */ ; (function($) { var defaults = { uploadUrl: CONTEXT_PATH + '/editor/uploadFile.do', fileAllowedTypes: ['*'], // 확장자 체크 ['png', 'pdf'] fileMaxSize: 1024 // 첨부파일 사이즈 MB단위 } $.fn.ajaxFileUpload = function(options, callback) { options = $.extend({}, defaults, options); var $file = $(this); // 특정 파일 확장자만 지정 if( options.fileAllowedTypes.indexOf('*') == -1 ) { var ext = ''; $(options.fileAllowedTypes).each(function(i) { if( i > 0 ) { ext += ","; } ext += '.' + this; }); $file.attr('accept', ext); } // 이벤트 생성 $file.on('change', function() { if ($file.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 = $file[0].files[0]; // 확장자 및 용량체크 if( !fncValidate(options, file) ) { return; }; data.append("file", file); $.ajax({ type : 'post', url : options.uploadUrl, data : data, processData : false, contentType : false, beforeSend: function() { if( $.blockUI != null ) { $.blockUI({ message : '', }); } }, complete: function() { if( $.unblockUI != null ) { $.unblockUI(); } }, success : function(html) { // FileUploadInterceptor에서 필러링 처리 if( html.constructor != Object ) { $file.val(""); alert ('허용되지 않은 확장자입니다.'); return; } $file.val(""); if( callback ) callback(html); }, error : function(error) { alert("파일 업로드에 실패하였습니다."); console.log(error); console.log(error.status); }, // 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 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; } // 파일 사이즈 변경 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; } })(jQuery);