Best jQuery File Upload Plugins & Tutorials with Demo

Fileuploader : Beautiful and powerful HTML5 File Uploading Tool

Fileuploader : Beautiful and powerful HTML5 File Uploading Tool

Fileuploader is a beautiful and powerful HTML5 file uploading tool. A jQuery and PHP plugin that transforms the standard file input into a revolutionary and fancy field on your page.

  • File preview with image thumbnail or icon
  • File image thumbnail can be generated in canvas to resize it perfectly for given with and height
  • Render synchron the file preview
  • File icon background is generated from file extension
  • Customize your own input and thumbnail elements
  • Responsive and fancy animations
  • Choose multiple files from different folders
  • Drag&Drop feature
  • Upload each file with Ajax
  • Upload synchron the files
  • Upload progressbar with many data available
  • Start, retry and cancel upload actions
  • Paste images from clipboard (only in Chrome)
  • Validate the file’s limit, size and extension. You can also use your own function
  • Edit mode for already uploaded files
  • All files are in one list in a hidden input
  • Use input HTML attributes to configurate it
  • HTML template renderer using Text variables
  • CSS file icon
  • PHP upload helper
  • PHP generates an array with many file informations
  • PHP can create a custom file name
  • API and more than 24 Callbacks to manipulate freely the appearance and functionality of your file input

jQuery Bootstrap File Input Plugin

jQuery Bootstrap File Input Plugin

File input fields look differently in all browsers. It’s a pain in the arse to design something that looks nice in all browsers and it sucks that support for this is not available in Twitter Bootstrap.

This jQuery plugin is designed to make all file input fields look like standard Twitter Bootstrap buttons.

LoadImg : jQuery plugin for Load and Preview Picture

LoadImg : jQuery plugin for Load and Preview Picture

LoadImg is JQuery function , you can load and preview picture before upload with ajax , php or any framework.

Uppy : JavaScript File Uploader

Uppy : JavaScript File Uploader

Uppy is (going to be) a cool JavaScript file uploader that fetches files for you from local disk, Google Drive, Dropbox, Instagram, remote URLs, cameras and other exciting locations, and then uploads them to wherever you want. Uppy is being developed by the Transloadit team because we want file uploading experience to be better — both for users and developers.

Upload Multiple Images with Preview in jQuery & PHP

Upload Multiple Images with Preview in jQuery & PHP

In this tutorial we will show you how to upload multiple images with image preview using jQuery Ajax and PHP.We use jQuery and jQuery Form Plugin which helps in uploading images to server.

JS Image Loader

JS Image Loader

It’s a JavaScript script that can be easy integrated into any web application and work in actual web browsers. After the integration you can add images into the form and they will be uploaded on server. Images can be moved or rotated and they all will be resized automatically on the client side. Without jQuery, only pure JavaScript.

Cloudinary jQuery Plugin with File Upload

Cloudinary jQuery Plugin with File Upload

Cloudinary is a cloud-based service that provides an end-to-end image management solution including uploads, storage, manipulations, optimizations and delivery.

Easily upload images to the cloud. Automatically perform smart image resizing, cropping and conversion without installing any complex software. Integrate Facebook or Twitter profile image extraction in a snap, in any dimension and style to match your website’s graphics requirements. Images are seamlessly delivered through a fast CDN, and much much more.

Drop Uploader – Drag&Drop jQuery File Uploader

Drop Uploader - Drag&Drop jQuery File Uploader

Drop Uploader plugin is allows you easily convert default file input field in your form to powerful Drag & Drop area, that supports multiple file uploading, file type validation and errors handling. No need to customize your existing form HTML code, just include plugin files and JS code snippet and turn it on.

Features:

  • Easy to use
  • One & Multiple Files Uploading
  • File Type Validation
  • File Browse and Drag&Drop Methods Supported
  • Works with native input file field
  • PHP File Uploading Script included

How to get File Name, Size, Type count in jQuery

How to get File Name, Size, Type count in jQuery

This article explains how to get the file name, file size (in bytes), file type (Text/PDF/CSS files) and total selected file counts in jQuery before uploading it to the server.

jQuery Slim, Image Upload and Ratio Cropping Plugin

jQuery Slim, Image Upload and Ratio Cropping Plugin

Modern cross platform responsive image cropping and uploading. Slim features beautiful animations and graphics. Configuration and implementation are a walk in the park.

Features:

  • Responsive and Beautifully Animated
  • Compatible with both Bootstrap and Foundation
  • Super Fast
  • Able to auto crop and resize imagery
  • Capable of Correcting Device Orientation problems
  • Setup to upload via AJAX or Form POST
  • A Treat for the Eyes


Best jQuery websites design awards