Today I am presenting the most important social networking feature called multiple ajax image upload without refreshing the page using jquery and PHP. We just modified few lines of code injqery.form.js plugin and renamed that to jquery.wallform.js.
Best jQuery File Upload Plugins & Tutorials with Demo
Mini AJAX File Upload Form with jQuery
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.
bootstrap-wysiwyg : jQuery Bootstrap WYSIWYG rich-content editor
Tiny bootstrap-compatible WISWYG rich text editor, based on browser execCommand, built originally for MindMup. Here are the key features:
- Automatically binds standard hotkeys for common operations on Mac and Windows
- Drag and drop files to insert images, support image upload (also taking photos on mobile devices)
- Allows a custom built toolbar, no magic markup generators, enabling the web site to use all the goodness of Bootstrap, Font Awesome and so on…
- Does not force any styling – it’s all up to you
- Uses standard browser features, no magic non-standard code, toolbar and keyboard configurable to execute any supported browser command
- Does not create a separate frame, backup text areas etc – instead keeps it simple and runs everything inline in a DIV
- (Optionally) cleans up trailing whitespace and empty divs and spans
- Requires a modern browser (tested in Chrome 26, Firefox 19, Safari 6)
- Supports mobile devices (tested on IOS 6 Ipad/Iphone and Android 4.1.1 Chrome)
blueimp jQuery File Upload
File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.
Dropzone.js : jQuery drag’n’drop File Upload library
Dropzone.js is a light weight JavaScript library for jQuery that turns an HTML element into a dropzone. This means that a user can drag and drop a file onto it, and the file gets uploaded to the server via AJAX.
Features:
- Image thumbnail previews. Simply register the callback
thumbnail(file, data)and display the image wherever you like - Multiple files and synchronous uploads
- Progress updates
- Support for large files
Dropbox File Uploader With Twitter Bootstrap
A few weeks ago, Dropbox introduced a neat new feature – the Dropbox Chooser. By embedding it into your website, you give users a button with which they can attach files from their online storage.
Today we are going to use this feature to create a simple application that allows people to attach a photo from their Dropbox account, crop an area with the Jcrop plugin, and download the result. Additionally, we will make use of Twitter Bootstrap to show dialog windows, and PHP on the backend for the actual photo cropping.
Fine Uploader : jQuery Multiple File Uploader
Multiple file upload plugin with progress-bar, drag-and-drop.This project attempts to achieve a user-friendly file-uploading experience over the web. It’s built as a Javascript plugin for developers looking to incorporate file-uploading into their website.
This plugin uses an XMLHttpRequest (AJAX) for uploading multiple files with a progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden-iframe-based upload in other browsers (namely IE), providing good user experience everywhere.
Features:
- Multiple file select, progress-bar in FF, Chrome, Safari
- Drag-and-drop file select in FF, Chrome
- Uploads are cancelable
- No external dependencies
- Doesn’t use Flash
- Fully working with HTTPS
- Automatic uploads (as files are selected) or queue files to me manually triggered when ready
FileDrop : Cross-browser JavaScript Drag & Drop file upload
FileDrop is a lightweight JavaScript class for easy-to-use file uploading that works out of the box.Self-contained cross-browser pure JavaScript class for Drag & Drop and AJAX (multi) file upload.
Features:
- Cross-browser – supports Firefox 3.6, Internet Explorer 6, Google Chrome 7, SRWare Iron 4, Apple Safari 5 and Opera 11.61.
- Self-contained & tiny – just 470 lines of code; 8 KiB when minified, 3.5 KiB when gzipped.
- Various callbacks – on progress, on done, on error and on many other events.
- Graceful degradation using IFrame fallback.
- Multiple file selection.
- Any number of independent FileDrops.
