Thursday , 23 October 2014
Home » JavaScript » 14 Best HTML5 jQuery File Upload Scripts

14 Best HTML5 jQuery File Upload Scripts

 jQuery AJAX improve your html5 website functionality with minimum code and effort. HTML5 websites are gaining much interest among web developers these days so creating new functional websites is important to have an edge over the competition. jQuery has multi-browser support so integrating ajax code with jQuery is now very easy. Ajax will load all the scripts asynchronously in the background to make client side interaction without any page reloads. This is the reason why jQuery ajax became so popular in the past few years. If you are unaware of where ajax is being used then examples are Facebook, Google, youtube etc.

jQuery Ajax File Upload scripts can be used in a php or asp.net page as they have cross platform support. Download websites require huge number of files to be uploaded either by the registered member or by the webmaster himself. Dribbble and deviantart are such sites which let you upload your design elements to their websites where others can easily download it. Uploading files to website manually via Ftp is not simple, that is why jQuery Ajax implementation in HTML became important. Just add the script code  into the HTML page and you will see a beautiful a addon letting users to select files for upload.

Choosing the correct file upload script for a particular website depends solely on the website usage. Some scripts to be precise will let you drag and drop files from desktop to the website drop section of the script you have included. The upload will start instantly when you drop the files on to the addon widget in some scripts. Others will let you choose specific files to upload and click submit button to start upload  as many love this. The upload status with progress bar are shown nicely when a file or multiple files are being uploaded to the server. The progress bar  can be styled according to your theme if you like.

Updated March 26, 2014

Mini AJAX File Upload Form

A mini upload form which is totally jaw breaking to look when it does it work efficiently. A must have free script which can be useful to your development material.

Features

  • Multiple File Upload
  • Simultaneous uploads
  • Upload Anything.
  • Drag and Drop Support
  • No Flash used
  • Small Upload Form suits all mobile devices.
  • Clean progress bar
  • Cancel Anytime
  • Tutorial is available
  • Free Script
Demo|Download

Mini AJAX File Upload Form

Dropzone JS

A light weight jquery plugin for easy file uploading and easy website integration. Go through the huge list of features this plugin has and the plugin is well documented.

Features

  • Responsive Design
  • Multiple File Uploads
  • All File Formats supported
  • Image preview for images
  • Top interface
  • Cancel, Remove Options
  • Drag’n’drop
  • Sequential Upload
  • Free Script/ plugin
Demo|Download

dropzone jsscript

jQuery File Upload Demo

The basic plus UI version of this script allows features which everyone is looking forward for like multiple file selection. The files can be  drag & drop in the server with the progress bar showing the total progress of uplaoding into the server. Start making commercial websites with these amazing upload scripts to let registered members full access to uploading files. Uses are varied like say, to upload new images to the gallery, upload form data for guest posting or resume etc. Latest versions of Firefox, Chrome, IE, Safari, Opera are also supported. Building premium websites require premium scripts so dont hesitate to the buy the script which will be completely unique. We have included free html5 jquery file upload scripts as well so don’t worry if you are simply interested in adding a upload form for your own website. Check the example screenshots on how the whole uploading works as i have checked it myself. Let me know if you need more help on this and stay tuned for new updates.

Features of interest

  • Drag & Drop
  • Html Progress bar
  • Add multiple files
  • Resume file uploads
  • File validation and size information
  • Cancel Upload
  • Delete upload files
  • Show alerts when upload fails
  • Responsive Widget Plugin
  • Ruby on Rails support
  • PHP support etc.
  • Free Script
  • Submit start upload button to upload.
DemoDownload

jQuery ui file upload script

 

Fine Uploader

Javascript plugin tool to give your users a smooth experience when uploading files to your website. Fine Uploader aims to make file-uploading on the web possible in every browser and mobile device. It is cross-browser, dependency-free, and 100% Javascript.

Features of Interest

  • Drag & Drop Files
  • Switch Image Preview On/Off
  • With or Without Submit Buttons
  • Limit file size
  • Disallow certain file formats
  • Limit number of multiple items to be uploaded.
  • Html Progress bar
  • Upload direct to Amazon S3 storage.
  • Error message with popup
  • Queue Files
  • Instant Uploads
  • Flat list of uploaded files with no preview.
  • Option for iframe-based uploads.
  • Free Download
DemoDownload

jQuery uploader plugin

 

HTML5 File Uploads with jQuery

Today we will be developing a small web application called Upload Center, that will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers.

Features of Interest

  • Minimal Drag & Drop Interface
  • Html Progress bar
  • No Submit Buttons
  • Instant upload of  images
  • Only images allowed.
  • Only support Chrome & Firefox.
  • Preview of images.
  • Free to use.
DemoDownload

jquery drag drop uploader

Plupload v2.0.0

Use any form type uploading options as this script can be integrated on HTML5 website with ease. The images are resized and trimmed in total files size saving the total bandwidth as well.

Features of Interest

  • Add Multiple Files
  • Flash based progress bar
  • Image resizing on the fly
  • Queued Files
  • Submit button for uploading files.
  • Error message for format others than images.
  • Stop upload anytime.
  • Total filesize
  • Free script
DemoDownload

pupload

Uploadify HTML5 File Upload jQuery Script

A fully customizable script to do the file uploading process easy. Uploadify™ is a jQuery plugin that allows you to easily add multiple file upload functionality to your website.

Features of Interest

  • Multiple File Uploads
  • Drag & Drop
  • Real-Time Progess bars
  • Specifiy restrictions for file
  • Premium support
  • HTML5 version costs 5$
DemoDownload

uploadify

 jQuery Fileuploader Plugin

jQuery fileuploader plugin is a powerful plugin which was designed for simplicity. It was inspired by uploadify but its functionality and concept is different. jQuery fileuploader uses html5 api which support ajax upload and drag and drop, and fallback to iframe upload for legacy browsers.

Features of interest

  • Multi File Selection & Upload
  • Image only
  • Files are Queued
  • Submit button to upload
  • Platform Independent
  • Html Progress bar
  • Html5 Drag & Drop
  • Free script
DemoDownload

jquery-fileuploader-codeigniter

Ajax+PHP Multi Images-Multi Files Uploader

Ajax+PHP Multi Images-Multi Files Uploader is a tool (and not a full Gallery) to upload multiple Images and/or Files using the same form. In addition is bundled with many features to make your life easier.

Features of interest

  • Multi File upload
  • Progress bar without flash
  • Drag & Drop
  • Upload any file (txt, pdf, jpg etc)
  • Crop uploaded images
  • Webcam captures
  • Responsive Design
  • Add image description
  • Bootstrap 3 Ready
  • No page refresh
  • Premium script costing $11
DemoDownload

jQuery php multi uploader

The AwsmUploader: Unlimited Uploads w/o Flash!

The AwsmUploader lets you easily upload files by drag-n-drop (built-in) or by feeding it with files from own sources (such as regular file-inputs). It was built using plain JavaScript, HTML5 and PHP (that’s all it needs).
The AwsmUploader does not require any of these: Flash, ActiveX, Chrome extensions, 3rd party libraries (e.g. jQuery, Dojo, MooTools, Modernizr), plug-ins of any type, server-side frameworks etc.

Features of Interest

  • Drag & Drop Support
  • Multiple file upload and queuing
  • Set file size limit on the fly
  • Limit Maximum parallel uploads
  • Set image thumbnails ON/OFF
  • Big progress bar to drop files
  • No Flash
  • Supports all desktop & mobile browsers
  • Upload huge multiple file formats
  • Responsive Design
  • Real time file uploads
  • Premium script costing $12
DemoDownload

AwsmUploader

 

HTML5 Pure Uploader

The pure  uploader script which pushes the boundaries of normal image uploaders and also other file type scripts. Add watermark to the uploaded image and resize them easily.

Features of Interest

  • Drag & Drop Files
  • Upload any file types
  • Cancel uploads
  • Image watermark and resize.
  • Multiple files at a time
  • Start upload button
  • Responsive Design
  • HTML5 Progress bar
  • All top browser support
  • Error customization
DemoDownload

pure uploader

Quform – Responsive Ajax Contact Form

Quform is a powerful responsive ajax contact form that you can easily embed into any web page in a matter of minutes.  This contact form lets you place attachment files with ease and will sent the same to the recipient.  A perfect guest post scenario or uploading resume for a job you are interested in. The form data is saved to the database so a database is a must for this jQuery Ajax script.

Important Features

  • Multiple File upload
  • Restrict the submission of form with many factors
  • Responsive design
  • Works in all major browsers
  • Tested on all mobile devices (with android or iOS)
  • Form validation & filtering
  • Form data saved to a database
  • Autoresponsders
  • All file formats supported for upload.
  • Easy integration to a HTML or a php page.
  • Premium script costing $6
  • Over 4000 sales
DemoDownload

Responsive Ajax Contact Form

Small File Uploader

Small Uploader is a PHP script which allows uploading multiple files WITHOUT using Flash. This file uploader uses AJAX and will not force the page to reload. The feedback about uploading files are given through it’s well designed user interface. This script is perfect for uploading small files.

Features

  • Switch Drag and Drop On/Off
  • Doesn’t use Flash
  • Server upload errors are shown
  • Display file size and type
  • Limit file size
  • Multiple file type support
  • Its light weight.
Demo|Download

small uploader

FileGator

A completely different script for completely different use as this not your everyday needy script. Upload, edit, manage, zip and share files and folders. A upload plugin to rule them all and this is the plugin you are looking for, if you are into filehosting service. Similar related service i can think of is rapidshare, mediafire, hotfile etc.

Features

  • Add multiple files
  • Manage Uploaded Files
  • Thumbnail view of uploaded images
  • Zip files online
  • Move files to any folder
  • Create folder online
  • User registration
  • Interface to Manage user accounts
  • Send file via email.
  • Premium script costs $9.
  • Interesting concept.
DemoDownload

file hosting upload script

 

About Allie Kingsley

Allie Kingsley is a social media manager for designscrazed. She is crazy about new gadgets and up to date with latest technology trends. Use comments to notify any issues you are facing.

14 comments

  1. Unfortunately, except for uploadify none of them support IE9 which is majorly distributed on Windows 7 worldwide.
    And no web developer would want to make a site that would rule out this major functionality for his clients using IE9.

    • @User_001 – You are incorrect. Many of these plug-ins support IE9 and older, including the one I maintain (on this list): Fine Uploader, which supports IE7 and up.

    • On top of what Ray Nicholus said, developers shouldn’t have to pander to people with outdated browsers. People with Windows 7 can upgrade to IE10. A simple JavaScript notification to remind users to update would be easier.

      • On top of what Anonymous said about what Ray Nicholus said, developers shouldn’t have to pander to people with IE x. A simple JavaScript notification to remind users to not use IE at all would be the best solution. (^-^)

  2. You bring the best

  3. A question. Which of the above plug ins will allow you to upload content directly into a database table as opposed to a file folder located on your server (and how…). I am a novice with regards to some things but… Tried Uploadify. Too complicated for me. Please let me know.

  4. Please remove the items on this list that charge money. That’s just bullsh*t. And they’re not even that good.

    • I have added two free scripts to our existing plugins. Premium plugins seems to be made from the free plugins which we have introduced here. :D

      But i think they have some added features and it depends on personal choice if to go for free or premium. Premium support is a notable feature among many.

  5. simon nooranvary

    Hi Allie, A great post. May I request that you review our file hosting script. I think you will be impressed. The dedicated site is found here, http://yetishare.com/ or the demo can be found here http://fhscript.com/

    I hope once you have had a chance to evaluate our script that you can add ours onto this list.

    Kind regards,
    Simon.
    YetiShare.

  6. Excellent post.. this definitely helped in my search for the right plugin.

    Cheers

    B

  7. Nice list.

    The problem I’m finding is that even those that allow multiple file uploads don’t seem to allow multiple image selection on Android.

    If anyone has a way around this, I’d love to hear it.

  8. Very good collection, thank you envatoproducts.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>