Download and extract the jQuery Fileuploader Plugin

https://github.com/johnlanz/jquery-fileuploader

Load CSS and Javascript:

 
<link href="css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />
<link href="css/fileUploader.css" rel="stylesheet" type="text/css" />
 
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.fileUploader.js" type="text/javascript"></script>
 

Html: (Form for uploading your files)

 
<form action="/path/to/upload/script(backend/controller)" method="post" enctype="multipart/form-data">
	<input type="file" name="file" class="fileUpload" multiple>
 
	<button id="px-submit" type="submit">Upload</button>
	<button id="px-clear" type="reset">Clear</button>
</form>
 

• multiple attribute allows to select multiple files

Upload Controller or equivalent backend script that handles the uploading of files

 
if (file upload is successful)
{
	//ouput 'success' inside <div id="status">
	print '<div id="status">success</div>';
	//then output your message
	print '<div id="message">Your file success message</div>'
}else
{
	//ouput 'error' inside <div id="status">
	print '<div id="status">error</div>';
	print '<div id="message">File Upload error message</div>'
}
 

• Note: version 1.3 div id=status is used instead of div id=output

Initialize the plugin script

 
<script type="text/javascript">
	jQuery(function($){
		$('.fileUpload').fileUploader();
	});
</script>
 

Download my example using PHP. PHP File Upload

Codeigniter Example: Codeigniter File Upload

If you want to use it on CakePHP proceed to my tutorial: AJAX File Upload using jQuery and Cakephp Media Plugin