597 lines
17 KiB
JavaScript
597 lines
17 KiB
JavaScript
/**
|
|
* 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 ){
|
|
|
|
// 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.hwpx".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 imgViewDiv = document.getElementById("DIV_IMG_VIEW");
|
|
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 = "";
|
|
}
|
|
};
|
|
|
|
};
|