Today we will be developing a small web application called Upload Center, that will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers.
The photos will have a preview and a progress bar, all of which controlled on the client side. Currently, the photos are only stored in a folder on the server, but you could improve it any way you like.
Are you looking for ajax file/image upload and preview without refreshing page using Jquery. I had implemented this ajax form submitting using jquery.form plugin and used image cropping PHP code for uploading images. Just five lines of JavaScript code, Using this you can upload files, image and videos.
SFBrowser is an open source application, built with PHP and jQuery, formanaging files online with an Ajaxed interface.
Besides listing files and folders, it can upload, delete, rename and preview them. Uploading can be accomplished via an Ajaxed or Flash-based uploader (queued multiple uploads, progress bar, canceling, selection filtering, size filtering).
The functionality can be extended with plugins. There are few ready-to-use ones like filetree and image-resize.
In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.
The solution we are going to use for this app is webcam.js. It is a JavaScript wrapper around flash’s API that gives us control over the user’s webcam.
We ditch the upload button in favor of a save button and fire the AJAX upload event as soon as a file is selected. The image is processed server side and a thumbnail is loaded onto the existing page. Dosen’t that feel so much better?
We now have a visual representation (imagine that) of the image we selected. This is particularly useful in larger forms when many fields will be submitted with a single action. It allows the user to review the form before pressing save and see what image (or images) they selected.
