Simple Ajax Uploader jQuery Plugin With Animated Progress

Category: jQuery | Sub-Category: Forms


ajax uploader jquery plugin

Simple Ajax Uploader jQuery Plugin that supports drag and drop, CORS, and multiple file upload with animated progress bars. Fully responsive, works on mobile phones, and all modern browsers. Can be used with or without jQuery.



There are 2 ways to use this plugin:

1. For Single file upload – Only 1 upload is allowed at a time. Progress bar will be re-used for each upload.
2. For Multiple file upload– Multiple files allowed at a time, concurrent file uploads. Multiple progress bars will be created before each upload.

Method 1: Single file upload

var sizeBox = document.getElementById('sizeBox'), // container for file size info
    progress = document.getElementById('progress'); // the element that will be used as a progress bar

var uploader = new ss.SimpleUpload({
      button: 'uploadButton', // Upload button
      url: 'uploadHandler.php', // server side handler
      name: 'uploadfile', // upload name        
      progressUrl: 'uploadProgress.php',
      responseType: 'json',
      allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
      maxSize: 1024, // in kilobytes
      hoverClass: 'ui-state-hover',
      focusClass: 'ui-state-focus',
      disabledClass: 'ui-state-disabled',
      onSubmit: function(filename, extension) {
          this.setFileSizeBox(sizeBox); // assign this element as file size container
          this.setProgressBar(progress); // assign this element as progress bar
      onComplete: function(filename, response) {
          if (!response) {
              alert(filename + 'upload failed');
              return false;            
          // do something with response...

Method 2: Multiple file upload

var uploader = new ss.SimpleUpload({
      button: 'uploadButton',
      url: 'uploadHandler.php', // server side handler
      progressUrl: 'uploadProgress.php', // enables cross-browser progress support (more info below)
      responseType: 'json',
      name: 'uploadfile',
      multiple: true,
      allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'], // for example, if we were uploading pics
      hoverClass: 'ui-state-hover',
      focusClass: 'ui-state-focus',
      disabledClass: 'ui-state-disabled',   
      onSubmit: function(filename, extension) {
          // Create the elements of our progress bar
          var progress = document.createElement('div'), // container for progress bar
              bar = document.createElement('div'), // actual progress bar
              fileSize = document.createElement('div'), // container for upload file size
              wrapper = document.createElement('div'), // container for this progress bar
              progressBox = document.getElementById('progressBox'); // on page container for progress bars

          // Assign classes
          progress.className = 'progress';
          bar.className = 'bar';            
          fileSize.className = 'size';
          wrapper.className = 'wrapper';

          // Create progress bar and add it to the page
          wrapper.innerHTML = '<div class="name">'+filename+'</div>'; // filename is passed to onSubmit() 
          progressBox.appendChild(wrapper); // an element on the page that will hold the progress bars 

       // Assign a role for every element of the progress bar 
       this.setProgressBar(bar); //the actual progress bar 
       this.setFileSizeBox(fileSize); // display file size 
       this.setProgressContainer(wrapper); // containing div that will be removed after upload has finished },
       // Do something after upload is done
       onComplete: function(filename, response) {
          if (!response) { 
             alert(filename + 'upload failed'); 
             return false; 
           } // Code to be executed after finishing an upload... 


// File upload button. You can pass either a an element ID string, element, or jQuery object. 
// Default value: ""

// Link to the location of the server-side file upload handler. Required.
// default value: ""

// Upload parameter name. Required.
// Default value: ""

// You can enable drag and drop upload by passing an element ID string, element, or jQuery
//  object that wil be set as the element onto which files will be dragged for uploading. // Default value: ""

// CSS class that will be applied to the dropzone element when a file is dragged over.
// Default value: ""

// Additional HTTP request headers. Example: customHeaders: { header1: 'value', header2: 'value; }
// Default value: {}

// Enable/Disable cross-domain file uploading
// Default value: false

//  Enable/Disable multiple file uploads.
// Default value: false

// Max number of simultaneous uploads.
// Default value: 3

// Maximum file size that is allowed to upload (in kilobytes). Integer
// Default value: false // no limit

// If set to false the file name is appended to the url query string. True disables this behaviour
// Defalt value: false.

// Restric file extension only to the values listed here. 
// example: allowedExtensions: ["jpg", "jpeg", "png", "gif"]

// When upload limit is reached, allow any files that are selected afterward to be queued
// and then automatically uploaded when prior uploads have been done.
// Defalt value: true

// You can add additional data that will be sent to the server.
// Default value: {}

// The HTTP method to use for uploads.
// Default value: "POST"

// By default, uploads will start as soon as a file or files are selected. If set to false
// upload will be delay so it can be triggered manually with the submit() function
// Defalt value: true

// Class that will be applied to the upload button on mouse :hover.
// Default value: ""

// Class that will be applied to the upload button on :focus event.
// Default value: ""

Callback Functions

onChange( filename, extension, uploadBtn ) // fired when user selects a file

onSubmit( filename, extension, uploadBtn ) // fired before file is uploaded

onAbort( filename, uploadBtn ) // fired when upload is manually aborted

onProgress( pct ) // pct argument accepts integer

onComplete( filename, response, uploadBtn ) // fired when upload has finished

onExtError( filename, extension )

onSizeError( filename, fileSize ) // fired if upload limit is exceeded 

onError( filename, errorType, status, statusText, response, uploadBtn ) // fires if error is encountered during upload 


setOptions( options )
setData( data )
setProgressBar( element )
setPctBox( element )
setFileSizeBox( element )
setProgressContainer( element )
setAbortBtn( element, remove )