Reading local files in JavaScript

HTML5 finally provides a standard way to interact with local files, via the File API specification. As example of its capabilities, the File API could be used to create a thumbnail preview of images as they're being sent to the server, or allow an app to save a file reference while the user is offline. Additionally, you could use client-side logic to verify an upload's mimetype matches its file extension or restrict the size of an upload.
The spec provides several interfaces for accessing files from a 'local' filesystem:

1. File - an individual file; provides readonly information such as name, file size, mimetype, and a reference to the file handle.
2. FileList - an array-like sequence of File objects. (Think <input type="file" multiple> or dragging a directory of files from the desktop).
3. Blob - Allows for slicing a file into byte ranges.

When used in conjunction with the above data structures, the FileReader interface can be used to asynchronously read a file through familiar JavaScript event handling. Thus, it is possible to monitor the progress of a read, catch errors, and determine when a load is complete. In many ways the APIs resemble XMLHttpRequest's event model.
Note: At the time of writing this tutorial, the necessary APIs for working with local files are supported in Chrome 6.0 and Firefox 3.6. As of Firefox 3.6.3, the File.slice() method is not supported.

http://www.html5rocks.com/en/tutorials/file/dndfiles/

How to Use HTML5 File Drag & Drop

Dragging and dropping files from your desktop to a browser is one of the ultimate goals for web application integration. This is the first in a four-part series of posts which describes how to:

1. enable file dragging and dropping onto a web page element
2. analyze dropped files in JavaScript
3. load and parse files on the client
4. asynchronously upload files to the server using XMLHttpRequest2
5. show a graphical progress bar while the upload occurs
6. use progressive enhancement to ensure your file upload form works in any browser (good news for all you IE6 fans!)
7. code it in plain ol’ JavaScript without a library.

http://www.sitepoint.com/html5-file-drag-and-drop/

Screencast : How to Create a File Upload Progress Bar in Rails, Passenger, Prototype and Low Pro

How to Create a File Upload Progress Bar in Rails, Passenger, Prototype and Low Pro from Erik Andrejko on Vimeo.

An upload progress bar is one of the best ways to improve the usability of file uploads in your application. This screencast will show how to create a file upload progress bar using Rails, Passenger, Low Pro and the upload progress bar apache module.

Screen Cast

• View a quicktime version: full, iPod.
• View the complete code for the screencast.

Required

• Passenger
• Upload progress bar apache module
• Prototype
• Low Pro for unobtrusive javascript
• Paperclip or something else to handle the uploaded files

Optional

• Configure a realistic (slow) development environment
• Passenger Prefpane a preference pane for Passenger under OS X Leopard

http://railsillustrated.com/screencast-file-uploads-progress-in-rails-passenger.html

Ajax file upload

Browsers force us to use file inputs for uploads, which are impossible to style. Moreover, form-based uploads look obsolete in modern ajax applications. We can use flash to solve this problem, but javascript works nice too.

View an usage examples for jquery and prototype with various options.

Download

• jquery.ajax_upload.0.9.js(7KB)
• jquery.ajax_upload.0.9.min.js (3KB)
• prototype.ajax_upload.0.9.js (7KB)
• prototype.ajax_upload.0.9.min.js(3KB)

http://valums.com/ajax-upload/