We needed a PHP and jQuery image upload and crop tool and came up with the following.
Before you start, ensure you have the following:
- PHP 4 or Higher (It has been tested on Version 5)
- Safe mode must be off! – A number of users have reported issues when safe mode is on.
- PHP GD Library
- jQuery ver 1.2.3 or Higher
- Image Area Select plugin by Michal Wojciechowski
In this tutorial we will code an Upload Form from Impressionist UI. We will code it using the Plupload API. Plupload allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads. This way we are able to create a very powerful upload form compatible with all browsers. So let’s get started
- All operations with files and folders on a remote server (copy, move, upload, create folder/file, rename, etc.)
- High performance server beckend and light client UI
- Local file system, MySQL, FTP volume storage drivers
- Background file upload with Drag & Drop HTML5 support
- Standard methods of file/group selection using mouse or keyboard
- Move/Copy files with Drag & Drop
- Archives create/extract (zip, rar, 7z, tar, gzip, bzip2)
- Quicklook, preview for common file types
- “Places” for your favorites
- Calculate directory sizes
- Thumbnails for image files
- Easy to integrate with web editors (elRTE, CKEditor, TinyMCE)
- Flexible configuration of access rights, upload file types, user interface and other
- Simple client-server API based on JSON
Plupload allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads.
The developers of TinyMCE brings you Plupload, a highly usable upload handler for your Content Management Systems or similar. Plupload is currently separated into a Core API and a jQuery upload queue widget this enables you to either use it out of the box or write your own custom implementation.
Ajax Upload; A file upload script with progress-bar, drag-and-drop.Use AJAX Upload to upload multiple files without refreshing the page and style upload button as you wish.This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.
jQuery NailThumb is a handy jQuery plugin helps you convert any image to any thumbnail with full control.If you want to add avatars to your application it’s easier to use this plugin to let them fit any size you need then to develop a functionality that help your user to upload avatars of the right size/sizes.
It creates thumbnails easily from high-res images, without any distortion, with one line of code. You can even decide thumbnail dimensions directly from CSS.
This plugin integrates perfectly with any media gallery, even more useful in dynamic web application when you can face any shape or size.
In this tutorials we tell how to create file upload progress bar with PHP and jQuery. In this post we had developed few lines of code using PHP APC library, it is very simple getting the server file upload process every few second and increasing the bar color using jquery css property. Just take a look at this demo.
jqUploader is a jquery plugin that substitutes html file input fields with a flash-based file upload widget, allowing to display a progressbar and percentage. It is designed to take most of its customization from the html code of your form directly – so you don’t have to do things twice . For instance, the maximum file size, if specified via html, will be recognized and used in the rich upload interface generated by jqUploader.
The plugin uses the form action attribute value (normally pointing to a server side script handling the upload and other data manipulations, and appends a variable “jqUploader=1” so that the upload code is initiated when it sees that key/value is on the posted data.
File Upload widget with multiple file selection, drag&drop support, progress bar and preview images for jQuery.Supports cross-domain, chunked and resumable file uploads.
Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.