Using file inputs at the client side
HTML has always lacked a convenient method to read the user's files. Before HTML5, the only way to access user files on the client side was to use an input element of type file, upload that file to the server then send it back to the browser.
HTML5 brings the ability to read user files locally, inside the user's browser using JavaScript code. The implementation is an extension of the functionality of a file input element with additional API.
In this recipe, we're going to display a text file that is selected by the user by using the new HTML5 file API (http://www.w3.org/TR/FileAPI/).
How to do it...
Let's write the code.
Create an HTML page with a file
inputfield and a contentdivto show the contents of the selected file:<!DOCTYPE HTML> <html> <head> <title>File API example</title> </head> <body> <input type="file" id="file" value="Choose text file"> <div id="content"></div>...
