Uploading Multiple Files in PHP without ajax or jquery
Here iam giving simple and very efficient php multiple file uploader in single submit with the option of deleting uploaded files from the list
And this uploader works in both LE and Firefox very well
While uploading multiple file after adding files into the list before uploading u can able to alter the list in this uploader, and in list only the file names will be visible
And inside javascript u can change the images and buttons based on your require
The Steps installing this uploader into ur php file pls follow the steps below
Step 1
Paste this following javascript inside ur html file or in separate javascript file which should be include in html
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;
};
/**
* 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 = 'ufile[]';//this u can set if your making use of array in the list
element.id='ufile[]'; // 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';
new_element.size = '48';
// 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';
};
// 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 to add the button
var new_row_button = document.createElement( 'input' );
new_row_button.type = 'button';
new_row_button.value = 'Delete';
new_row_button.align = 'absbottom';
new_row_button.style.cursor = 'hand';
// Delete image instead of button you can put image with this following code
/*var new_row_button = document.createElement('img');
new_row_button.src = images/image_namegif';
new_row_button.alt = 'Delete';
new_row_button.height = '14';
new_row_button.align = 'absbottom';*/
// 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;
// Appease Safari
// without it Safari wants to reload the browser window
// which nixes your already queued uploads
return false;
};
// Add button
new_row.appendChild(new_row_button);
// Set row value
var arr = element.value.split("\\");
var out_count =arr.length;
if(navigator.appName == "Microsoft Internet Explorer") {
var new_label = document.createElement('label');
new_label.align = 'absmiddle';
new_label.innerHTML = ' '+arr[out_count - 1];
//new_row.innerHTML += arr[out_count - 1];
new_row.appendChild(new_label);
//new_row.innerHTML = new_row_button;
}
else
{
var new_label = document.createElement('label');
new_label.align = 'absmiddle';
new_label.innerHTML = ' '+element.value;
new_row.appendChild(new_label);
}
//new_row.appendChild(new_row_button);
// Add it to the list
this.list_target.appendChild( new_row );
};
};
Step 2
Paste this code in place of where you want to display the upload browse button and the list of file uploaded
Hav form with action
<form action="upload.php" method="post" id="uploadfrm" name=" uploadfrm " enctype="multipart/form-data">
<div >
<input id="ufile[]" size="48" type="file" value="" name="file_1" />
</div>
<div id="files_list"> </div>//here you can see the list of files uploaded
</form>
Step 3
In upload.php you can access this files data in this way
if (count($_FILES ['ufile']['name'])) {
for($i=0;$i
{
$root_path= //root path of the upload folder where you created
$path[$i]= $root_path."/upload/".$_FILES['ufile']['name'][$i];//where you want to upload the your files(path) $file_names[$i] = $_FILES['ufile']['name'][$i];
$copy_done[$i] = copy($_FILES['ufile']['tmp_name'][$i], $path[$i]);
}
if($copy_done)
{
echo "uploaded";
}
}
