Jquery PHP Multiple File Upload

Here in this post i created multiple file upload using latest version of jQuery and Ajax upload library by Andrew Valums. Just download both libraries and include them in your files.

Then first we will create a upload button and when user click on this button user can add files. we are not using classic File input box for the file upload

   1. <!-- Upload Button to select files to upload-->  
   2. <div id="upload_button" >Upload File</div><span id="status_message" ></span>  
   3. <!--List Files-->  
   4. <ul id="files_list" ></ul>  

Here we created the Upload button and for the status message which is used to display the status of the file upload

Applying Style

#upload_button{
	margin:30px 200px; padding:8px 5px 8px 5px;
	font-weight:normal; font-size:1em;
	font-family:Georgia,Arial, Helvetica, sans-serif;
	text-align:center;
	background:#000000;
	color:#ffffff;
	border:2px solid #DADADA;
	width:150px;
	cursor:pointer !important;
	-moz-border-radius:5px; -webkit-border-radius:5px;
}

#status_message{
	font-family:Arial; padding:5px;
	color:#b00000;
	font-size:12px;
	font-weight:bold;
}
ul#files_list{ list-style:none; padding:0; margin:0; }
ul#files_list li{ padding:10px; margin-bottom:2px; width:200px; float:left; margin-right:10px; text-align:center;color:#ffffff;}
ul#files_list li img{ max-width:180px; max-height:150px; }
.success{ background:#000000; border:1px solid #cccccc; }
.error{ background:#f0c6c3; border:1px solid #cc6622; }

PHP code to upload files

<?php
$uploaddir = './uploads/'; 
$file = $uploaddir . basename($_FILES['uploadfile']['name']); 
 
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) { 
  echo "success"; 
} else {
	echo "error";
}
?>

Files are uploaded to the “uploads” folder. for that create ‘upload-file.php’ files with the above code.

Javascript Code

Now the Jquery and Javascript code to add the ajax features using the AJAX Upload library.

$(function(){
		var btnUpload=$('#upload_button');
		var status=$('#status_message');
		new AjaxUpload(btnUpload, {
			action: 'upload-file.php',
			name: 'uploadfile',
			onSubmit: function(file, ext){
				 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
                    // extension is not allowed 
					status.text('Only JPG, PNG or GIF files are allowed');
					return false;
				}
				status.text('Uploading...');
			},
			onComplete: function(file, response){
				//On completion clear the status
				status.text('');
				//Add uploaded file to list
				if(response==="success"){
					$('<li></li>').appendTo('#files_list').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');
				} else{
					$('<li></li>').appendTo('#files_list').text(file).addClass('error');
				}
			}
		});
		
	});

Code Explanation

To use the AJAX Upload library we need to initialize the AjaxUpload object and provide it with parameters. The first parameter is the id of the button element on which the user will click and second is the server side script that’ll handle file upload. The second parameter can accept an array of various options to give you more control over the process.

For more details of the of options for file upload you can check the Ajax Upload Library.

Note: The file upload using AJAX is not true ajax as it uses hidden iframe to upload the form data but his whole process is transparent by using the AJAX Upload library and gives a feel of AJAXified file upload.