Html Code :
<form enctype="multipart/form-data" action="#" method="post">
<input id="my_file_element" type="file" name="file_1" >
<input id="my_file_element_1" type="file" name="second_1" >
<input type="submit">
Files:
<!-- This is where the output will appear -->
<div id="files_list">File Upload:1<br/></div>
<div id="files_list_1">File Upload:2<br/></div>
<script>
var multi_selector = new MultiSelector( document.getElementById( 'files_list' ), 10 );
multi_selector.addElement( document.getElementById( 'my_file_element' ) );
</script>
<script>
var multi_selector_1 = new MultiSelector_1( document.getElementById( 'files_list_1' ), 10 );
multi_selector_1.addElement( document.getElementById( 'my_file_element_1' ) );
</script>
</form>
Php Code:
if($_SERVER['REQUEST_METHOD']=="POST")
{
$count = count($_FILES);
for($i=0; $i<$count; $i++)
{
if($_FILES['file_'.$i]['name'])
{
$tmp_name = $_FILES['file_'.$i]['tmp_name'];
$newname = dirname(__FILE__).'attachment_1/'.$name;
if (!file_exists($newname))
{
if ((move_uploaded_file($tmp_name,"attachment_1/" . $name)))
{
$file_name .= $name."@";
}
}
else
{
$name = rand()."_".$name;
move_uploaded_file($tmp_name,"attachment_1/" .$name);
$file_name .= $name."@";
}
}
if($_FILES['test_'.$i]['name'])
{
$tmp_name_1 = $_FILES['test_'.$i]['tmp_name'];
$newname_1 = dirname(__FILE__).'attachment_2/'.$name_1;
if (!file_exists($newname_1))
{
if ((move_uploaded_file($tmp_name_1,"attachment_2/" . $name_1)))
{
$file_name_1 .= $name_1."@";
}
}
else
{
$name_1 = rand()."_".$name_1;
move_uploaded_file($tmp_name_1,"attachment_2/" .$name_1);
$file_name_1 .= $name_1."@";
}
}
}
if($file_name)
{
$sql_1 = "insert INTO test (file_name) values('".$file_name."')";
mysql_query($sql_1) or die("Database Error.".mysql_error());
}
if($file_name_1)
{
$sql_1 = "insert INTO test (file_name_1) values('".$file_name_1."')";
mysql_query($sql_1) or die("Database Error.".mysql_error());
}
}
Javascript File:
multifile_compressed.js code are for two file upload control with this we can upload number of file as assign limit in js.
if i want file upload for number of times than we need to create js function and function calling script that number of times and changes element.name = 'file_' in js function so in file post it get as that name like file_ & test_...
function MultiSelector( list_target, max ){this.list_target = list_target;this.count = 0;this.id = 0;if( max ){this.max = max;} else {this.max = -1;};this.addElement = function( element ){if( element.tagName == 'INPUT' && element.type == 'file' ){element.name = 'file_' + this.id++;element.multi_selector = this;element.onchange = function(){var new_element = document.createElement( 'input' );new_element.type = 'file';this.parentNode.insertBefore( new_element, this );this.multi_selector.addElement( new_element );this.multi_selector.addListRow( this );this.style.position = 'absolute';this.style.left = '-1000px';};if( this.max != -1 && this.count >= this.max ){element.disabled = true;};this.count++;this.current_element = element;} else {alert( 'Error: not a file input element' );};};this.addListRow = function( element ){var new_row = document.createElement( 'div' );var new_row_button = document.createElement( 'input' );new_row_button.type = 'button';new_row_button.value = 'Delete';new_row.element = element;new_row_button.onclick= function(){this.parentNode.element.parentNode.removeChild( this.parentNode.element );this.parentNode.parentNode.removeChild( this.parentNode );this.parentNode.element.multi_selector.count--;this.parentNode.element.multi_selector.current_element.disabled = false;return false;};new_row.innerHTML = element.value;new_row.appendChild( new_row_button );this.list_target.appendChild( new_row );};};
function MultiSelector_1( list_target, max ){this.list_target = list_target;this.count = 0;this.id = 0;if( max ){this.max = max;} else {this.max = -1;};this.addElement = function( element ){if( element.tagName == 'INPUT' && element.type == 'file' ){element.name = 'test_' + this.id++;element.multi_selector = this;element.onchange = function(){var new_element = document.createElement( 'input' );new_element.type = 'file';this.parentNode.insertBefore( new_element, this );this.multi_selector.addElement( new_element );this.multi_selector.addListRow( this );this.style.position = 'absolute';this.style.left = '-1000px';};if( this.max != -1 && this.count >= this.max ){element.disabled = true;};this.count++;this.current_element = element;} else {alert( 'Error: not a file input element' );};};this.addListRow = function( element ){var new_row = document.createElement( 'div' );var new_row_button = document.createElement( 'input' );new_row_button.type = 'button';new_row_button.value = 'Delete';new_row.element = element;new_row_button.onclick= function(){this.parentNode.element.parentNode.removeChild( this.parentNode.element );this.parentNode.parentNode.removeChild( this.parentNode );this.parentNode.element.multi_selector.count--;this.parentNode.element.multi_selector.current_element.disabled = false;return false;};new_row.innerHTML = element.value;new_row.appendChild( new_row_button );this.list_target.appendChild( new_row );};};
<form enctype="multipart/form-data" action="#" method="post">
<input id="my_file_element" type="file" name="file_1" >
<input id="my_file_element_1" type="file" name="second_1" >
<input type="submit">
Files:
<!-- This is where the output will appear -->
<div id="files_list">File Upload:1<br/></div>
<div id="files_list_1">File Upload:2<br/></div>
<script>
var multi_selector = new MultiSelector( document.getElementById( 'files_list' ), 10 );
multi_selector.addElement( document.getElementById( 'my_file_element' ) );
</script>
<script>
var multi_selector_1 = new MultiSelector_1( document.getElementById( 'files_list_1' ), 10 );
multi_selector_1.addElement( document.getElementById( 'my_file_element_1' ) );
</script>
</form>
Php Code:
if($_SERVER['REQUEST_METHOD']=="POST")
{
$count = count($_FILES);
for($i=0; $i<$count; $i++)
{
if($_FILES['file_'.$i]['name'])
{
$tmp_name = $_FILES['file_'.$i]['tmp_name'];
$newname = dirname(__FILE__).'attachment_1/'.$name;
if (!file_exists($newname))
{
if ((move_uploaded_file($tmp_name,"attachment_1/" . $name)))
{
$file_name .= $name."@";
}
}
else
{
$name = rand()."_".$name;
move_uploaded_file($tmp_name,"attachment_1/" .$name);
$file_name .= $name."@";
}
}
if($_FILES['test_'.$i]['name'])
{
$tmp_name_1 = $_FILES['test_'.$i]['tmp_name'];
$newname_1 = dirname(__FILE__).'attachment_2/'.$name_1;
if (!file_exists($newname_1))
{
if ((move_uploaded_file($tmp_name_1,"attachment_2/" . $name_1)))
{
$file_name_1 .= $name_1."@";
}
}
else
{
$name_1 = rand()."_".$name_1;
move_uploaded_file($tmp_name_1,"attachment_2/" .$name_1);
$file_name_1 .= $name_1."@";
}
}
}
if($file_name)
{
$sql_1 = "insert INTO test (file_name) values('".$file_name."')";
mysql_query($sql_1) or die("Database Error.".mysql_error());
}
if($file_name_1)
{
$sql_1 = "insert INTO test (file_name_1) values('".$file_name_1."')";
mysql_query($sql_1) or die("Database Error.".mysql_error());
}
}
Javascript File:
multifile_compressed.js code are for two file upload control with this we can upload number of file as assign limit in js.
if i want file upload for number of times than we need to create js function and function calling script that number of times and changes element.name = 'file_' in js function so in file post it get as that name like file_ & test_...
function MultiSelector( list_target, max ){this.list_target = list_target;this.count = 0;this.id = 0;if( max ){this.max = max;} else {this.max = -1;};this.addElement = function( element ){if( element.tagName == 'INPUT' && element.type == 'file' ){element.name = 'file_' + this.id++;element.multi_selector = this;element.onchange = function(){var new_element = document.createElement( 'input' );new_element.type = 'file';this.parentNode.insertBefore( new_element, this );this.multi_selector.addElement( new_element );this.multi_selector.addListRow( this );this.style.position = 'absolute';this.style.left = '-1000px';};if( this.max != -1 && this.count >= this.max ){element.disabled = true;};this.count++;this.current_element = element;} else {alert( 'Error: not a file input element' );};};this.addListRow = function( element ){var new_row = document.createElement( 'div' );var new_row_button = document.createElement( 'input' );new_row_button.type = 'button';new_row_button.value = 'Delete';new_row.element = element;new_row_button.onclick= function(){this.parentNode.element.parentNode.removeChild( this.parentNode.element );this.parentNode.parentNode.removeChild( this.parentNode );this.parentNode.element.multi_selector.count--;this.parentNode.element.multi_selector.current_element.disabled = false;return false;};new_row.innerHTML = element.value;new_row.appendChild( new_row_button );this.list_target.appendChild( new_row );};};
function MultiSelector_1( list_target, max ){this.list_target = list_target;this.count = 0;this.id = 0;if( max ){this.max = max;} else {this.max = -1;};this.addElement = function( element ){if( element.tagName == 'INPUT' && element.type == 'file' ){element.name = 'test_' + this.id++;element.multi_selector = this;element.onchange = function(){var new_element = document.createElement( 'input' );new_element.type = 'file';this.parentNode.insertBefore( new_element, this );this.multi_selector.addElement( new_element );this.multi_selector.addListRow( this );this.style.position = 'absolute';this.style.left = '-1000px';};if( this.max != -1 && this.count >= this.max ){element.disabled = true;};this.count++;this.current_element = element;} else {alert( 'Error: not a file input element' );};};this.addListRow = function( element ){var new_row = document.createElement( 'div' );var new_row_button = document.createElement( 'input' );new_row_button.type = 'button';new_row_button.value = 'Delete';new_row.element = element;new_row_button.onclick= function(){this.parentNode.element.parentNode.removeChild( this.parentNode.element );this.parentNode.parentNode.removeChild( this.parentNode );this.parentNode.element.multi_selector.count--;this.parentNode.element.multi_selector.current_element.disabled = false;return false;};new_row.innerHTML = element.value;new_row.appendChild( new_row_button );this.list_target.appendChild( new_row );};};
0 Comments