15+ Free HTML5 jQuery Upload File Scripts Example

Html5 and jQuery Ajax can design to upload multiple files with drag and drop file interface which is one easy for user to control upload photo or other files extension.  Here is useful example HTML5 file upload that you download and view demo links as well.

Essentially, during you are uploading files, it perfect to show progress bar or size  byte stream of current upload,  it is receiving a file so you know how many bytes you’ve received and somehow convey that information back to the client browser, while it is still in the process of uploading the file.

Mini AJAX File Upload Form

In this tutorial we are going to create an AJAX file upload form, that will let visitors upload files from their browsers with drag/drop or by selecting them individually. For the purpose, we will combine the powerful jQuery File Upload plugin with the neat jQuery Knob to present a slick CSS3/JS driven interface.

Mini-AJAX-File-Upload-FormDemo More Info

Dropzone Drag Drop Upload

Dropzone is an easy to use drag’n’drop library. It supports image previews and shows nice progress bars.

Dropzone-Drag-Drop-UploadDemo More Info

Drag&drop jQuery File Upload

File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.

Drag-drop-jQuery-File-UploadDemo More Info

Fine Uploader

FineUploader is the easiest javascript file uploader library to set up. Code examples are provided, whether you are using a jQuery wrapper, or plain JavaScript.

FineUploaderDemo More Info

Plupload 2.1.2

This example shows you how to use the jQuery UI widget use the “Switch theme” drop down to the right to select different jQuery UI themes.

Plupload-2.1.2Demo More Info

Uploadify HTML5 File Upload

Uploadify is a jQuery plugin that allows you to easily add multiple file upload functionality to your website. Two distinct versions (HTML5 and Flash) allow you the flexiblity to choose the right implementation for your site and fallback methods make it degrade gracefully.

Uploadify-HTML5-File-UploadDemo More Info

Pure Uploader

Pure-UploaderDemo More Info

Real Ajax Multi Uploader

Real Ajax Multi Uploader is a jQuery javascript plugin for creating with simplicity multiupload file system for web applications. It is based only on javascript and supports html5 uploading but also is compatible with html4. No flash, no silverlight or other plugins only JavaScript and Html. Ajaxupload is very simple to use does not need any special skill to set it up. Support Drag n Drop upload and make preview of images. It is applied to any container tag (div, span, p) and all file inputs, forms and buttons are automatically created by the plugin. The CSS and buttons are highly customizable. The upload server side script is written forPHP and ASPX, but it can be adapted in all server side languages (JSP,PERL).

Real-Ajax-Multi-Uploader-html5Demo More Info

Uploadrr – HTML5 File Uploader

Uploadrr is cross-browser compatible and fully usable on browsers with no HTML5 /CSS3 support.
Feel free to contact me if you encounter any issues.

Uploadrr-HTML5-File-UploaderDemo More Info

FileGator

FileGator-php-uploadDemo More Info

ImagePicker: Uploader – Webcam – Cropper

ImagePicker or imgPicker is a quick and easy way to upload images for profile avatar, profile header/cover (like Youtube/Google+), thumbnails or just when you need a simple image uploader. You can take a picture with your webcam and you also have the option to crop your image.

ImagePicker-Uploader-Webcam-CropperDemo More Info

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.

Small-File-Uploader-php-jqueryDemo More Info

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).

AwsmUploader-Unlimited-Uploads-FlashDemo More Info

Html5 File Upload with Progress

As per the Html5 Progress Eventsspec, the Html5 progress event provides the following information relevant to this conversation, total – Total bytes being transferred, loaded – Bytes uploaded thus far, lengthComputable – Specifies if the total size of the data/file being uploaded is known

Html5 File Upload with Progress

 

HTML5 Drag and Drop File Upload

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.

HTML5 Drag and Drop File UploadDemo | Download

jQuery HTML5 File Upload with Bar Progress

You can drag & drop files from your desktop on this webpage with Google Chrome, Mozilla Firefox and Apple Safari.
jQuery HTML5 File Upload with Bar ProgressDemo | Download

 

HTML5 Drag and Drop Multiple File Upload

Here is how you can implement drag and drop multiple file upload with native JavaScript. No plugins needed. Just plain old new HTML5. Again there is a working demo. You will need FireFox 3.6 to test it. Full source code can be at GitHub.
HTML5 Drag and Drop Multiple File UploadDemo | Download

HTML5 File and Folder Upload Control

Get started fast with SlickUpload and be ready to scale up to advanced functionality when you need it.

HTML5 File and Folder Upload ControlDemo | Download

Multiple File Uploads using HTML5

As a response to a reported bug where Chrome was taking ages to load up a flash multiple-file uploader, I’ve updated KFM to use HTML5′s multiple-file input box where possible.

Multiple File Uploads using HTML5Demo | Download

HTML5 Multiple File Upload Plugin with progress-bar

This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.

HTML5 Multiple File Upload Plugin with progress-barDemo | Download

HTML5 drag & drop API

Dragging and dropping files from your desktop to a browser is one of the ultimate goals for web application integration.

HTML5 drag & drop APIDemo | Download

Ajax Uploading With HTML5 File api

Prior to HTML5 and its File API, getting media from a user was a somewhat sordid affair.

Ajax Uploading With HTML5 File apiDemo | Download

jQuery Upload Multiple Files 

jQuery Upload Multiple Files Demo | Download

Written by Graham

Graham Bill has been a professional web developer and designer with more experience on coding HTML5, CSS3, php, javascript, jquery, ajax, jsp, XML, MySQL, SEO and especially on development joomla templates and wordpress themes.

Feedback Leave a comment

Leave a Reply

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

Please check to comfirm

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>