Support:

 

 
 

Ajax File Upload Script Using jQuery

View Demo | Download

Uploadify is really a great plugins for uploading files or images but i found it hard to implement in cakePHP and CodeIgniter; and also i dont know if my client uses flash; that is why I decided to create this jquery script.

A simple way to upload multiple files or images using jQuery with less manipulation of your native file uploading script.

This file upload script uses iframe for upload process and jQuery for manipulating files and client file validation.

Here's what we gonna do:

Load CSS and Javascript: (Inside <head> tag)

  1.  
  2. <link href="fileUploader.css" rel="stylesheet" type="text/css" />
  3. <script src="jquery.js" type="text/javascript"></script>
  4. <script src="jquery.fileUploader.js" type="text/javascript"></script>
  5.  

Html: (The native form for uploading your files)

  1.  
  2. <form action="/path/to/upload/controller" method="post" enctype="multipart/form-data">
  3. 	<input id="yourInputFileId" name="yourfilename" type="file" />
  4.  
  5. 	<br /><br />
  6.  
  7. 	<input type="submit" value="Upload" id="pxUpload" />
  8. 	<input type="reset" value="Clear" id="pxClear" />
  9. </form>
  10.  
  • Input ID's plays an important role for uploading the files

Upload Controller or equivalent back end script that handles the uploading of files

  1.  
  2. if (file upload is successful)
  3. {
  4. 	//ouput 'success' inside <div id="output">
  5. 	echo '<div id="output">success</div>';
  6. 	//then output your message (optional)
  7. 	echo '<div id="message">Your file success message</div>'
  8. }else
  9. {
  10. 	//ouput 'failed' inside <div id="output">
  11. 	echo '<div id="output">failed</div>';
  12. 	echo '<div id="message">File Upload error message</div>'
  13. }
  14.  

Initialize the plugin script

  1.  
  2. <script type="text/javascript">
  3. 	$(function(){
  4. 		$('#yourInputFileId').fileUploader();
  5. 	});
  6. </script>
  7.  

Plugins Option:

  1.  
  2. $(function(){
  3. 	$('#yourInputFileId').fileUploader({
  4. 		imageLoader: '',
  5. 		buttonUpload: '#pxUpload',
  6. 		buttonClear: '#pxClear',
  7. 		successOutput: 'File Uploaded',
  8. 		errorOutput: 'Failed',
  9. 		inputName: 'userfile',
  10. 		inputSize: 30,
  11. 		allowedExtension: 'jpg|jpeg|png|gif'
  12. 	});
  13. });
  14.  

Option:

OPTION DEFAULT VALUE DESCRIPTION
imageLoader   URL of the image loader
buttonUpload #pxUpload Selector of the button Upload
buttonClear #pxClear Selector of the button Clear
successOutput File Uploaded Ouput to be printed once the file upload is successful
errorOutput Failed Ouput to be printed once the file upload gets an error
inputName userfile Use this input name if it is not initialize in the input field
allowedExtension jpg|jpeg|png|gif allow extensions. Make sure that when using "|" the next string is not empty or else all of file extensions are allowed

  • Test on: IE7+, Firefox 3.0+, Google Chrome
View Demo | Download

11 Comments

 
Escueta June 20, 2010
Thanks for this great plugin
 
Learnphp June 21, 2010
To learn php,html,javascript,ajax,mysql,jquery with advanced concepts, you can visit http://advancedphptutorial.blogspot.com
 
Diogo June 23, 2010
Hello!

How can I send one input hidden together with input file?

Congratulations for this plugin!
 
Moderator June 24, 2010
@Diogo processing hidden input field is still in development. In the next version of this plugin I will add that feature.
Thanks
 
ajax file upload jquery June 29, 2010
Is it possible for an iframe uploader to create a progress bar. I mean displaying the process percentage of the upload????
 
anonymous July 20, 2010
How come that after I added these lines, other fields in my form disappeared?
 
Adudco July 23, 2010
I keep getting an error on the winzip file. Can you refresh it?
 
mr July 26, 2010
Doesn't work for me...FF 3.7 on localhost i've built an upload.php with something like
if(isset($_POST['uploader'])
and i receive nothing it go to //ouput 'failed' inside
i test it with $_file[uploader][name] $_post['userfile'] and even with if($_post) or if($_file) and nothing.
i understand the constructor but there is a problem with send ...any idea?
 
john July 28, 2010
@Adudco what do you mean winzip file?
 
john July 28, 2010
@mr you need to try your code without using the plugin. I mean you just test it using your native form upload.. if everything is ok, you can now use the plugin.

That's how i test my file uploading code.
 
akupenjajah August 6, 2010
Thanks for the plugin.
Works really fine for me... If anyone need help with the server side, i'm glad to share it.
 

Add Your Comment