Email Us : admin@pixelcone.com
logo

Tutorial


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. Before you initialize the script make sure your form works as expected.
  • 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