HTML5 Upload file and Drag Drop script using jQuery

With the help of HTML5 and jQuery it is easy to upload a file and drag drop, makes the user to feel better or provides easy way to control the file upload.
Progress Bar animation in HTML5 and jQuery can be achived easily with HTML5 and jQuery. Progress shows the users how long to wait while uploading. we are going to see some of the collections of articles or tutorial which explains HTML5 file upload and drag drop script with simple example.

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.
http://www.plupload.com/example_queuewidget.php

HTML5 Ajax file upload

The process occurs asynchronously in the background so the user can complete other on-page tasks while it occurs. The page will handle both the Ajax upload requests and standard form POSTs when the user clicks “Upload Files”.
http://www.sitepoint.com/html5-ajax-file-upload/

jQuery HTML5 file upload

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.
http://blueimp.github.com/jQuery-File-Upload/

HTML5 upload with progress bar

Html <form> with enctype=multipart/form-data, but with modification on the server side to enable showing users the upload progress.
http://www.matlus.com/html5-file-upload-with-progress/

HTML5 File Uploads with jQuery

Uploading files using HTML5 is actually a combination of three technologies – the new File Reader API, the also new Drag & Drop API, and AJAX.
http://tutorialzine.com/2011/09/html5-file-upload-jquery-php/

html5 multiple file upload

 

Implement drag and drop multiple file upload with native JavaScript. No plugins needed. Just plain new HTML5.
http://www.appelsiini.net/demo/html5_upload/demo.html

Native drag drop file upload

One of those powerful things we can do with it is create a file uploader where the user can drag & drop multiple files from their desktop straight into the browser.
http://www.thecssninja.com/demo/drag-drop_upload/

Pure HTML5 file upload

A great HTML5 file upload form with progress bar and preview (at client-side). We have already gave you jQuery based solution, but today’s application don’t require jQuery at all.
http://www.script-tutorials.com/pure-html5-file-upload/

Dojo HTML5 Multi-File Uploader

Included with Dojo 1.6 is a completely new HTML5 multi-file uploader, a widget that creates a stylable file-input button, with optional multi-file selection, using only HTML elements.
http://dojotoolkit.org/documentation/tutorials/1.6/uploader/

Using File API

Drag an image from your desktop on to the drop zone above to see the browser read the contents of the file and use it as the background – without uploading the file to any servers.
http://html5demos.com/file-api