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
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.
droparea is a jQuery plug-in for HTML5 drag-and-drop (images and files).
Originally it has:
- client-side image resizing with canvas on browser option
- data url option for sending a file/image as a text field with ajax
- click event for browsing files
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)
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.
- 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
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.
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.
- 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
- 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.
Today we’re going to be creating a file uploader using HTML5 drag and drop, along with the file reader API and some PHP. We’ll also be using local storage to remember which files were uploaded by the user.