Best jQuery File Upload Plugins & Tutorials with Demo

JavaScript HTML5 File Reader

JavaScript HTML5 File Reader

This object can read files user selected with the FileReader API.It creates an invisible file form input on the page to let the user select one or more local files.The object uses the HTML5 FileReader API to retrieve the contents of the files the user picked.A given callback function when each of the selected files is loaded.

Filestyle : jQuery plugin to style File Upload Input

Filestyle : jQuery plugin to style File Upload Input

Style the file upload input with jQuery.

SimpleFilePreview : jQuery Pre-form submission file Previews on Images

SimpleFilePreview : jQuery Pre-form submission file Previews on Images

SimpleFilePreview is a jQuery plug-in that allows for pre-form submission file previews on images and icon previews for non-images. The syntax is extremely simple and the UI allows for easy CSS styling.

Features:

  • Simple to implement
  • Show pre-submit image file preview in browsers that support this functionality
  • Show image file previews for any file post-upload
  • Show icon previews for any file type in all browsers
  • Works on “multiple” file inputs as well as single file inputs
  • Completely stylable
  • Small footprint

Facebook Style Background Image Upload and Position Adjustment

Facebook Style Background Image Upload and Position Adjustment

In this tutorial we will learn how to design Facebook style ajax background image upload and position adjustment using Jquery. I have been published many tutorials about ajax image upload, this one is very interesting and it is a combination of many features. I has implemented this in Wall Script, this post will explain you how to design timeline HTML frame, CSS techniques and database design for background image system.

KCFinder : Web file manager with PHP & HTML5

KCFinder : Web file manager with PHP & HTML5

KCFinder is free open-source replacement of CKFinder web file manager. It can be integrated into FCKeditor, CKEditor, and TinyMCE WYSIWYG web editors (or your custom web applications) to upload and manage images, flash movies, and other files that can be embedded into an editor’s generated HTML content.

Features:

  • Ajax engine with JSON responses
  • Multiple files upload
  • Upload files using HTML5 drag and drop from local file manager
  • Drag and drop images from external HTML pages. Multiple images can be dropped using selection (Firefox only)
  • Download multiple files or a folder as single ZIP file
  • Select multiple files with the Ctrl/Command key
  • Clipboard for copying, moving and downloading multiple files
  • Easy to integrate and configure in web applications

jQuery Signature Field

jQuery Signature Field

Provides signature field as jQuery component, using either a sketch pad or an uploaded signature file.

Dropper : jQuery Drag & Drop uploads Plugin

Dropper : jQuery Drag & Drop uploads Plugin

A jQuery plugin for simple drag and drop uploads.

HTML5 File Upload

HTML5 File Upload

This is a HTML5 file uploader, for single or multiple files. You can add files easily by dragging and dropping them or clicking. All files will be uploaded via AJAX or can be added within a form. Files can be renamed before uploading. Server files can be displayed and removed. All the files can be downloaded after they successfully uploaded.

Features:

  • Upload single or multiple files
  • Control files with extensions or mime type
  • Edit filename before uploading
  • Easy setup
  • jQuery & Bootstrap 3.1
  • Options to make it your own
  • PHP examples included

Picture Cut : jQuery plugin that Upload Drag & Crop Image

Picture Cut : jQuery plugin that Upload Drag & Crop Image

Picture cut is a jquery plugin that handles images in a very friendly and simple way, with a beautiful interface based on bootstrap or jquery ui, has great features like ajax upload, drag image from explorer, image crop and others.

Features:

  • Ajax Upload
  • Resize image
  • Drag image from explorer
  • Manipulate image size in bytes
  • Cropping image

HTML 5 Upload Image, Ratio with Drag and Drop

HTML 5 Upload Image, Ratio with Drag and Drop

A HTML5 Upload image tool, full use of HTML5 with canvas (with fallback options). Together with a ratio and drag & drop makes this tool ideal for use in a CMS.

Features:

  • uses canvas to crop the image, no server scripts needed!
  • want to use a server script, no problem! simple change it with additional options
  • full HTML5 support
  • save your image with AJAX or use the tradional FORM input file element
  • uses ratio to let it fit your screen or element
  • easy to use
  • additional options to configure
  • bootstrap 3.1
  • jQuery