Uploading Multiple Files in PHP without ajax or jquery

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"; 

}

}