/** * Convert a single file-input element into a 'multiple' input list * Usage: * * 1. Create a file input element (no name) * eg. * * 2. Create a DIV for the output to be written to * eg.
* * 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' ) ); */ function MultiSelector( list_target, max ){ // Where to write the list this.list_target = list_target; // How many elements? this.count = 0; // How many elements? this.id = 0; // Is there a maximum? if( max ){ this.max = max; } else { this.max = -1; }; this.totalSize = 0; /** * Add a new file input element */ this.addElement = function( element ){ // Make sure it's a file input element if( element.tagName == 'INPUT' && element.type == 'file' ){ // Element name -- what number am I? element.name = 'file_' + this.id++; // Add reference to this object element.multi_selector = this; // What to do when a file is selected element.onchange = function(){ // 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.addListRow( 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.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 = '삭제'; // 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--; this.totalSize = this.totalSize-this.parentNode.element.files[0].size; // 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; this.totalSize = this.totalSize +element.files[0].size; //alert( this.totalSize ); /* if( element.files[0].size > (1024*1024*100) ){ this.count--; this.totalSize = this.totalSize-element.files[0].size; alert("업로드할 수 있는 최대크기를 초과하였습니다.(최대 100 MB)\n선택한 파일 사이즈는 " + (setUnitString(element.files[0].size)) + "입니다."); if( this.max != -1 && this.count > this.max ){ //alert("aaaa"); } else { //alert("bbb"); this.current_element.disabled = false; }; return false; } */ //$("#totalAttFileSize").html("total size="+(setUnitString(this.totalSize))); new_row.innerHTML = element.value + " (" + setUnitString(element.files[0].size) + ") " + "  "; // Add button new_row.appendChild( new_row_button ); // Add it to the list this.list_target.appendChild( new_row ); }; /** * byte로 받은 이미지 용량을 화면에 표시를 위해 포맷팅 * @param {Object} nByte */ function setUnitString (nByte) { var nImageSize; var sUnit; if(nByte < 0 ){ nByte = 0; } if( nByte < 1024) { nImageSize = Number(nByte); sUnit = ' B'; return nImageSize + sUnit; } else if( nByte > (1024*1024)) { nImageSize = Number(parseInt((nByte || 0), 10) / (1024*1024)); sUnit = ' MB'; return nImageSize.toFixed(2) + sUnit; } else { nImageSize = Number(parseInt((nByte || 0), 10) / 1024); sUnit = ' KB'; return nImageSize.toFixed(0) + sUnit; } } };