The jquery file upload plugin with progress bar is one a very handy little tool that you can use on your website. This plugin is compatible with all browsers and it can be used to send files to the server by making use of client’s browsers. As you make use of this excellent plugin, you will find that it has the ability to work in any environment, including Windows and Mac.
Uploading files and images has been a pain in the ass until recently. Currently, there is a few jQuery file upload plugin with progress bar because it’s hard to implement those features. I’m going to show you how to use one of those plugins and how to integrate the progress bar with Bootstrap and Less
This article will contain the best free plugin, Jquery File Upload Plugin. JQuery File Upload Plugin is having a very interesting feature. The main reason is that it can be used to upload more than one file at a time.
Jquery File Upload Plugin With Progress Bar
Read: Drag and Drop Multiple File Upload in jQuery & AJAX
Uploadify plug-in let you integrate multiple file upload functionality to your website easily. This file upload plugin offers extreme customization and available as both HTML5 and Flash versions for you to choose from. What we like most is the ability to upload multiple files without clustering the page with numerous browse buttons, real-time progress bar and drag-drop support with HTML5 version.
- Multiple file upload without multiple browse buttons
- Drag and drop files to upload queue
- Real time progress bar to show uploading status
- Highly Customizable to suit your need
- Restrict uploads based on file size, type, quantity etc
2. Droply JS
Droply is a light-weight responsive jQuery based plug-in to setup single or multi-file upload feature to websites. As a developer your time is precious, so using droply.js will give you the leverage to add beautiful and professional file uploader to websites without going through the hassle of implementing everything from scratch. The highly configurable settings and ease-of-use makes it a remarkable file uploader plug in.
With Droply users can easily upload extremely large files of several giga-bytes with ease as it employs the latest chunk upload technique. And the best part is its minimal size without comprising rich features it offers. It is written in pure jquery so compatible with all platforms.
- Responsive multi-file uploader
- Drag and drop Files support
- Delete files from upload queue
- Employs smooth CSS3 effects
- Progress indicator & file preview options
- Compatible with Android and iOS
Plupload is another great choice if you need a file uploader with ready to build User Interface. It is based on HTML5 APIs and offers limited customizations. But Flash and Silverlight fallbacks, numerous readily available themes and multi-lingual packs makes it worth trying. Plus it uploads files in chunks and let you bypass any server limitation on uploading bigger files.
Read: jQuery Drop Down List with Search Example
- Multi-uploader using HTML5 APIs
- Drag-and-Drop file support
- Instant thumbnail preview
- Shrink Images on Client-Side to save bandwidth
- Upload in Chunks to support large files
- Support for 30+ languages
Besides the plug-in offers so many interesting features like pause & resume uploads, file partitioning, entire folder uploading, image scaling, uploading directly to cloud like Amazon S3 or Microsoft Blob Storage service etc.
- Pause, Resume & Retry Uploads
- Cancel uploads in the middle
- Support for Cloud uploading
- Delete already uploaded files
- File Chunking / Partitioning
- ES6 modules & CommonJS Support
- Upload from mobile camera
5. jQuery File Upload
jQuery File Upload is another good jquery plugin for simplified file uploading and saving. It offers versatile range of options supporting multiple file upload, drag and drop feature, status bar indicator, file preview and much more. Plus you can cancel and resume upload at any time. It also supports uploading large file in chunks and let you edit and resize images after uploading.
jQuery File Upload Plug in is cross-domain compatible which is another good reason to go for. It works with all sorts of server platforms like PHP, Python, Java, Node.js, Ruby on Rails etc that supports standard HTML file uploads.
- Multiple file uploads
- Drag & Drop files
- Progress bar Support
- Cancel/Resume uploads
- Image resizing via JS APIs
- Preview images/audio/video
- Highly configurable & extendable
Dropzone is an open source library that turns out any HTML element into a potential dropzone area. It employs AJAX technology and let user drag and drop files onto it for uploading. The library is extremely light-weight and written on pure java script. Includes so many nice features like multiple uploads, progress bar, image preview & resize, configure file limits, rename file during uploads etc.
Dropzone is compatible with browsers like Chrome, Firefox, IE, Safari, Opera but not work in older versions which doesn’t support drag’n’drop. So make sure to check for browser compatibility.
- Multiple files & synchronous uploads
- Progress bar indicator
- Support for big files
- Image Preview
- Enabled Retina
7. Bootstrap File Input
If you need something to work with Bootstrap then this is for you. Bootstrap File Input Plugin works with Bootstrap 3.x and an enhanced version of standard HTML5 file element with multiple file selection, preview support for various types of files such as html, image, audio, video, flash and objects. Further you can simply drag and drop files for uploading, preview, add and delete uploaded files. It is based on AJAX and relies on Bootstrap CSS3 styles.
- Multiple File uploads
- Drag and drop
- Multi-file preview
- Multi language widgets
- Image Resizing
- Configurable layout & style