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 Name	Default	Discription
    uploadUrl	null	URL to which files must be uploaded (same as form action attribut)
    fileName	file	Name of the input
    inputText	Select Files...	Text to be displayed on file selector
    syncUploads	false	if 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)
    allowExt	gif|jpg|jpeg|png |bmp|mp4|mp3|pdf |doc|docx|xcl|txt	File extension to be allowed
    maxFileSize	5242880	Mazimum size of each file to be allowed in Bytes Default 5MB
    showProgress	true	To show or hide progressbar
    closeAnimationSpeed	500	animation speed in milliseconds
    zoomPreview	true	Enable/Disable Image enlarged preview on mouse over
    zoomWidth	160	Width of previewed image in pixels used only if zoomPreview:true
    zoomHeight	170	Height of previewed image in pixels used only if zoomPreview:true
    beforesend	function(file){}	Finction to be executed before each upload begins, for more information please reffer AJAX Doc
    always	function(file){}	Finction to be executed always for each upload, for more information please reffer AJAX Doc
    done	function(file,xhr){}	Finction to be executed when ajax cal is done, for more information please reffer AJAX Doc
    fail	function(response){}	Finction to be executed on ajax fail for each upload, for more information please reffer AJAX Doc
    progress	function(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.
    complete	function(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
    success	function(response){}	Finction to be executed if ajax status returs 200, for more information please reffer AJAX Doc
    error	function(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

  • Grab the full source code with demo file from GitHub repository Download Now

• 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