Wednesday, 23 April 2014

JSAjaxFileUploader jQuery Plugin



  • Overview

    • Features
      • Plug And Play Setup
      • Lightweight (7.3 KB minified version)
      • No Flash required
      • Upload with progress bar and image preview
      • Multiple File Upload Support
      • Multiple independent file uploaders on one page
      • Can upload largeger files
      • Multiple callback listeners
      • Fully Customizable
      • Can be used with Phonegap/Cordova apps
      • Suitable for mobile development
      • Flexible event system
      • Ready for PHP, ASP.net, Java and others
      • Free for personal and commercial use and much more...
  • Documentation

    • Developer Guide
      Implementing ajax file upload with JSAjaxFileUploader is easy hence called as Plug And Play Plugin.
      Simple add an HTML element and bind the plugin to the HTML element and you are done.
      The most useful part of the plugin are it's callback functions listed below. which gives you complete control over each file which is being uploaded.
      Param NameDefaultDiscription
      uploadUrlnullURL to which files must be uploaded (same as form action attribut)
      fileNamefileName of the input
      inputTextSelect Files...Text to be displayed on file selector
      syncUploadsfalseif set to true all uploads will be synchronous (Note: Number of asynchronous uploades depends on browser as this plugin doesn't uses flash. For more information refer this Browserscope link)
      formData- Extra form data to be sent with each file (JSON data, other serialised data support will be added soon)
      allowExtgif|jpg|jpeg|png |bmp|mp4|mp3|pdf |doc|docx|xcl|txtFile extension to be allowed
      maxFileSize5242880Mazimum size of each file to be allowed in Bytes Default 5MB
      showProgresstrueTo show or hide progressbar
      closeAnimationSpeed500animation speed in milliseconds
      zoomPreviewtrueEnable/Disable Image enlarged preview on mouse over
      zoomWidth160Width of previewed image in pixels used only if zoomPreview:true
      zoomHeight170Height of previewed image in pixels used only if zoomPreview:true
      beforesendfunction(file){} Finction to be executed before each upload begins, for more information please reffer AJAX Doc
      alwaysfunction(file){} Finction to be executed always for each upload, for more information please reffer AJAX Doc
      donefunction(file,xhr){} Finction to be executed when ajax cal is done, for more information please reffer AJAX Doc
      failfunction(response){} Finction to be executed on ajax fail for each upload, for more information please reffer AJAX Doc
      progressfunction(file,event){} Finction to be executed during upload is in progress, 'file' object contains all information of the file being uploaded and 'event' object contains all info like total file size and total bytes uploaded etc.
      completefunction(file,xhr){} Finction to be executed after ajax is completed. complete will execute not matter ajax fails or succeeds, for more information please reffer AJAX Doc
      successfunction(response){} Finction to be executed if ajax status returs 200, for more information please reffer AJAX Doc
      errorfunction(response){} Finction to be executed on ajax error, for more information please reffer AJAX Doc
  • Demo

    • A basic working example can be found in the Live Demo
      Check here for Live Demo with all parmeters in action
  • Download

  • Tested On Browsers

    • Passed on
      • Internet Explorer: Win7: V10, V11
      • Firefox: Win7: 28.0
      • Chrome: XP SP2 x64: 30.0
      • Opera: XP SP2 x64: 18.0
      • Safari: Win7 SP1: 5.1.7