File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
2023-06-22
File name
Commit message
Commit date
/**
* Convert a single file-input element into a 'multiple' input list
* Usage:
*
* 1. Create a file input element (no name)
* eg. <input type="file" id="first_file_element">
*
* 2. Create a DIV for the output to be written to
* eg. <div id="files_list"></div>
*
* 3. Instantiate a MultiSelector object, passing in the DIV and an (optional) maximum number of files
* eg. var multi_selector = new MultiSelector( document.getElementById( 'files_list' ), 3 );
*
* 4. Add the first element
* eg. multi_selector.addElement( document.getElementById( 'first_file_element' ) );
*
* img_view boolean - 이미지 파일 첨부 미리보기
*/
function MultiSelectorModi( list_target, max , file_label, img_view ){
// Where to write the list
this.list_target = list_target;
// How many elements?
this.count = 0;
// How many elements?
this.id = 0;
this.update_count = 0;
// Is there a maximum?
if( max ){
this.max = max;
} else {
this.max = -1;
};
this.file_label = file_label
this.current_count = 0;
//console.log('update!!!!!!');
/**
* Add a new file input element
*/
_base = this;
this.addElement = function( element ){
//console.log('update_count>'+this.update_count);
//console.log('max>'+this.max);
//console.log('count>'+this.count);
// Make sure it's a file input element
if( element.tagName == 'INPUT' && element.type == 'file' ){
//console.log('check step addElement start');
// Element name -- what number am I?
element.name = 'file_' + this.id;
element.id = 'egovfile_' + this.id;
element.class = "";
//미리보기 안할경우 에러방지
if(!( undefined == this.file_label || ""==this.file_label)){
//document.getElementById(this.file_label).setAttribute("for","egovfile_"+this.id);
}
//console.log('file_label>'+element.name);
this.id++;
// Add reference to this object
element.multi_selector = this;
// What to do when a file is selected
element.onchange = function(){
var sErrMsg = "첨부파일 갯수는 ["+_base.max+"]이상 첨부할 수 없습니다!";
if( _base.update_count > 0 ){
if( _base.count > (_base.max-_base.update_count) ){
//element.value = "";
//alert(sErrMsg); return;
return;
}
}
// img view 미리보기 기능
if (img_view) {
var pathname = element.value;
var ext = pathname.split('.').pop().toLowerCase();
if( ".gif.jpg.bmp.jpeg.png".indexOf(ext) != -1 ){
this.multi_selector.imgViewChange( this );
} else {
element.value = "";
alert("이미지 형식의 확장자만 업로드 가능합니다!"); return;
}
}
if( _base.max > 0 && _base.count > _base.max ){
//element.value = "";
//alert(sErrMsg); return;
return;
}
// New file input
var new_element = document.createElement( 'input' );
new_element.type = 'file';
// Add new element
this.parentNode.insertBefore( new_element, this );
// Apply 'update' to element
this.multi_selector.addElement( new_element );
// Update list
this.multi_selector.addListRowNew( this );
// Hide this: we can't use display:none because Safari doesn't like it
this.style.position = 'absolute';
this.style.left = '-1000px';
this.style.top = '-1000px';
this.style.display = 'none';
this.style.visibility = 'hidden';
this.style.width = '0';
this.style.height = '0';
this.style.overflow = 'hidden';
new_element.onkeypress = function(){
return false;
};
};
// If we've reached maximum number, disable input element
if( this.max != -1 && this.count >= this.max ){
//element.disabled = true;
};
// File element counter
this.count++;
// Most recent element
this.current_element = element;
} else {
// This can only be applied to file input elements!
alert( 'Error: not a file input element' );
};
};
/* 이미지 변환 function */
this.addImgViewChange = function( element ){
element.multi_selector = this;
element.onchange = function(){
var sErrMsg = "첨부파일 갯수는 ["+_base.max+"]이상 첨부할 수 없습니다!";
if( _base.update_count > 0 ){
if( _base.count > (_base.max-_base.update_count) ){
//element.value = "";
//alert(sErrMsg); return;
return;
}
}
// img view 미리보기 기능
if (img_view) {
var pathname = element.value;
var ext = pathname.split('.').pop().toLowerCase();
if( ".gif.jpg.bmp.jpeg.png".indexOf(ext) != -1 ){
this.multi_selector.imgViewChange( this );
} else {
element.value = "";
alert("이미지 형식의 확장자만 업로드 가능합니다!"); return;
}
}
if( _base.max > 0 && _base.count > _base.max ){
//element.value = "";
//alert(sErrMsg); return;
return;
}
// Hide this: we can't use display:none because Safari doesn't like it
/*this.style.position = 'absolute';
this.style.left = '-1000px';
this.style.top = '-1000px';
this.style.display = 'none';
this.style.visibility = 'hidden';
this.style.width = '0';
this.style.height = '0';
this.style.overflow = 'hidden';*/
};
};
/**
* Add a new row to the list of files
*/
this.addListRowNew = function( element , preview_div){
// Row div
var new_row = document.createElement( 'div' );
new_row.className = "file_add";
// Delete button
var new_row_button = document.createElement( 'img' );
new_row_button.src = '../../../images/egovframework/com/cmm/btn/btn_del.png';
new_row_button.className = "cursor";
new_row_button.style.margin = "0 0 0 0";
new_row_button.style.padding = "0 0 0 0";
//new_row_button.style.top = '3px';
// References
new_row.element = element;
// Delete function
new_row_button.onclick= function(){
// Remove element from form
this.parentNode.element.parentNode.removeChild( this.parentNode.element );
// Remove this row from the list
this.parentNode.parentNode.removeChild( this.parentNode );
// Decrement counter
this.parentNode.element.multi_selector.count--;
// Re-enable input element (if it's disabled)
this.parentNode.element.multi_selector.current_element.disabled = false;
// img view
if (img_view) document.getElementById("img_view").style.display = "none";
// which nixes your already queued uploads
return false;
};
// Set row value
//new_row.innerHTML = element.value;
new_row.innerHTML = "<input type='text' class='input2' readonly='readonly' style='width:50%; ' value='"+element.value+" ' style='padding:0 0 0 0;margin:0 0 0 0;'>";
// Add button
new_row.appendChild( new_row_button );
// Add it to the list
this.list_target.appendChild( new_row );
};
/**
* Add a new row to the list of files
*/
this.addListRow = function( element ){
// Row div
var new_row = document.createElement( 'div' );
// Delete button
var new_row_button = document.createElement( 'input' );
new_row_button.type = 'button';
new_row_button.value = 'Delete';
// References
new_row.element = element;
// Delete function
new_row_button.onclick= function(){
// Remove element from form
this.parentNode.element.parentNode.removeChild( this.parentNode.element );
// Remove this row from the list
this.parentNode.parentNode.removeChild( this.parentNode );
// Decrement counter
this.parentNode.element.multi_selector.count--;
// Re-enable input element (if it's disabled)
this.parentNode.element.multi_selector.current_element.disabled = false;
// img view
if (img_view) document.getElementById("DIV_IMG_VIEW").style.display = "none";
// which nixes your already queued uploads
return false;
};
// Set row value
new_row.innerHTML = element.value;
// Add button
new_row.appendChild( new_row_button );
// Add it to the list
this.list_target.appendChild( new_row );
};
/**
* img file view change
*/
this.imgViewChange = function( element ){
if(document.getElementById("egovComFileList").style.display=="none"){
document.getElementById("egovComFileList").style.display = "block";
}
document.getElementById("img_view").style.display = "";
//파일선택 후 파일 미리보기
if ( window.FileReader ) {
/* 크롬, 사파리, 파이어폭스, 오페라, IE 10 이상에서는 HTML5 FileReader 이용 */
var reader = new FileReader();
reader.onload = function (e) {
//$('#'+preImg).attr('src', e.target.result);
document.getElementById("img_view").src = e.target.result;
};
reader.readAsDataURL(element.files[0]);
//return input.files[0].name; // 파일명 return
} else {
/* IE 8, 9에서 가능하나 권장하지 않음 */
var img = document.getElementById("img_view");
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"
+ element.value + "', sizingMethod='scale')"; //이미지 로딩, sizingMethod는 div에 맞춰서 사이즈를 자동조절 하는 역할
/* IE 8, 9에서 불가능 */
//document.getElementById("IMG_VIEW").src = element.value;
img.width = 66;
img.height = 52;
img.alt = "";
}
};
};
function MultiSelector( list_target, max , file_label, img_view, maxSize, img_bbs, elementName, isPdf){
// Where to write the list
this.list_target = list_target;
// How many elements?
this.count = 0;
// How many elements?
this.id = 0;
this.update_count = 0;
// Is there a maximum?
if( max ){
this.max = max;
} else {
this.max = -1;
};
// max 파일사이즈. mb
if( maxSize ){
this.maxSize = maxSize;
this.maxSizeByte = maxSize * 1024 * 1024;
} else {
this.maxSize = -1;
};
this.file_label = file_label
this.current_count = 0;
//console.log('update!!!!!!');
/**
* Add a new file input element
*/
var _base = this;
this.addElement = function( element ){
//console.log('update_count>'+this.update_count);
//console.log('max>'+this.max);
//console.log('count>'+this.count);
// Make sure it's a file input element
if( element.tagName == 'INPUT' && element.type == 'file' ){
//console.log('check step addElement start');
// Element name -- what number am I?
element.name = 'file_' + this.id;
element.id = 'egovfile_' + this.id;
element.class = "";
// 첨부파일 항목 여러개시 file name/id 처리. (ex 대관관리)
if (elementName) {
element.name = elementName + '_' + this.id;
element.id = elementName + '_' + this.id;
}
//미리보기 안할경우 에러방지
if(!( undefined == this.file_label || ""==this.file_label)){
document.getElementById(this.file_label).setAttribute("for","egovfile_"+this.id);
}
//console.log('file_label>'+element.name);
this.id++;
// Add reference to this object
element.multi_selector = this;
// What to do when a file is selected
element.onchange = function(){
// img view 미리보기, imgBbs 이미지 게시판
if (img_view || img_bbs) {
var pathname = element.value;
var ext = pathname.split('.').pop().toLowerCase();
if( ".gif.jpg.bmp.jpeg.png".indexOf(ext) != -1 ){
} else {
element.value = "";
alert("이미지 형식의 확장자만 업로드 가능합니다!");
return;
}
}else{
var pathname = element.value;
var ext = pathname.split('.').pop().toLowerCase();
if( ".ppt.pptx.doc.docx.xls.pdf.ai.psd.hwp.txt.bmp.gif.jpg.jpeg.png.raw.wav.wma.mp3.mp4.mkv.avi.flv.mov.zip.alz.egg.rar".indexOf(ext) != -1 ){
}else{
element.value = "";
alert("지금 확장자는 업로드 불가능합니다!");
return;
}
}
if (isPdf) {
var pathname = element.value;
var ext = pathname.split('.').pop().toLowerCase();
if( ".pdf".indexOf(ext) != -1 ){
} else {
element.value = "";
alert("PDF 형식의 확장자만 업로드 가능합니다!");
return;
}
}
if (this.files
&& multi_selector.maxSize != -1
&& this.files[0].size > multi_selector.maxSizeByte) {
alert( '파일사이즈가 초과되었습니다. 최대크기 ' + maxSize + 'mb' );
this.value = '';
return;
}
var sErrMsg = "첨부파일 갯수는 ["+_base.max+"]이상 첨부할 수 없습니다!";
if( _base.update_count > 0 ){
if( _base.count > (_base.max-_base.update_count) ){
element.value = "";
alert(sErrMsg);
return;
}
}
if( _base.max > 0 && _base.count > _base.max ){
element.value = "";
alert(sErrMsg);
return;
}
// New file input
var new_element = document.createElement( 'input' );
new_element.type = 'file';
// Add new element
this.parentNode.insertBefore( new_element, this );
// Apply 'update' to element
this.multi_selector.addElement( new_element );
// Update list
this.multi_selector.addListRowNew( this );
// Hide this: we can't use display:none because Safari doesn't like it
this.style.position = 'absolute';
this.style.left = '-1000px';
this.style.top = '-1000px';
this.style.display = 'none';
this.style.visibility = 'hidden';
this.style.width = '0';
this.style.height = '0';
this.style.overflow = 'hidden';
new_element.onkeypress = function(){
return false;
};
};
// If we've reached maximum number, disable input element
if( this.max != -1 && this.count >= this.max ){
//element.disabled = true;
};
// File element counter
this.count++;
// Most recent element
this.current_element = element;
} else {
// This can only be applied to file input elements!
alert( 'Error: not a file input element' );
};
};
/**
* Add a new row to the list of files
*/
this.addListRowNew = function( element ){
// Row div
var new_row = document.createElement( 'div' );
new_row.className = "file_add";
// Delete button
var new_row_button = document.createElement( 'img' );
new_row_button.src = '../../../images/egovframework/com/cmm/btn/btn_del.png';
new_row_button.className = "cursor";
new_row_button.style.margin = "0 0 0 0";
new_row_button.style.padding = "0 0 0 0";
//new_row_button.style.top = '3px';
// References
new_row.element = element;
// 이미지 미리보기
if (img_view) {
var div_img_name ;
if($(element).attr('id').indexOf('atchFile')!=-1){
div_img_name = "DIV_IMG_ATCH" ;
}
if($(element).attr('id').indexOf('thumb')!=-1){
div_img_name = "DIV_IMG_THUMB" ;
}
//var imgViewDiv = document.getElementById("DIV_IMG_VIEW");
var imgViewDiv = document.getElementById(div_img_name);
var newImgDiv = document.createElement( 'div' );
newImgDiv.innerHTML = '<img src="" name="IMG_VIEW" id="IMG_VIEW" class="imgView" align="middle" alt="미리보기" title="미리보기">';
imgViewDiv.appendChild( newImgDiv );
new_row.viewElement = newImgDiv;
this.imgViewChange(element, newImgDiv);
}
// Delete function
new_row_button.onclick= function(){
// 미리보기 삭제
if (img_view) {
this.parentNode.viewElement.parentNode.removeChild( this.parentNode.viewElement );
}
// Remove element from form
this.parentNode.element.parentNode.removeChild( this.parentNode.element );
// Remove this row from the list
this.parentNode.parentNode.removeChild( this.parentNode );
// Decrement counter
this.parentNode.element.multi_selector.count--;
// Re-enable input element (if it's disabled)
this.parentNode.element.multi_selector.current_element.disabled = false;
// which nixes your already queued uploads
return false;
};
// Set row value
//new_row.innerHTML = element.value;
new_row.innerHTML = "<input type='text' class='input2' readonly='readonly' style='width:50%; ' value='"+element.value+" ' style='padding:0 0 0 0;margin:0 0 0 0;'>";
// Add button
new_row.appendChild( new_row_button );
// Add it to the list
this.list_target.appendChild( new_row );
};
/**
* img file view change
*/
this.imgViewChange = function( element, div ){
//파일선택 후 파일 미리보기
if ( window.FileReader ) {
/* 크롬, 사파리, 파이어폭스, 오페라, IE 10 이상에서는 HTML5 FileReader 이용 */
var reader = new FileReader();
reader.onload = function (e) {
//$('#'+preImg).attr('src', e.target.result);
div.firstChild.src = e.target.result;
};
reader.readAsDataURL(element.files[0]);
//return input.files[0].name; // 파일명 return
} else {
/* IE 8, 9에서 가능하나 권장하지 않음 */
var img = document.getElementById("IMG_VIEW");
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"
+ element.value + "', sizingMethod='scale')"; //이미지 로딩, sizingMethod는 div에 맞춰서 사이즈를 자동조절 하는 역할
/* IE 8, 9에서 불가능 */
//document.getElementById("IMG_VIEW").src = element.value;
img.width = 66;
img.height = 52;
img.alt = "";
}
};
};