O'Reilly logo

HTML5 Data and Services Cookbook by Mite Mitreski, Gorgi Kosev

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

  1. Create an HTML page with a file input field and a content div to show the contents of the selected ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required