File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
/**
* 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 : '<i class="fa fa-refresh fa-spin orange" style="font-size:600%"></i>',
});
}
},
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);