File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
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) {
// 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
&& _base.maxSize != -1
&& this.files[0].size > _base.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 = "";
}
};
};