"HTML5 Web Development Example" series (iv) HTML5 in the FileSystem interface

HTML 5 Adds a filesystem-related application interface in addition to the file object used to get information about the files. FileSystem provides a granular classification of different processing functions, such as FileReader and FileList objects for file reading and processing, blobs and FileWriter objects for creating and writing, Directoryreader and LocalFileSystem objects for directory and file system access, filesystem feature is a breakthrough in the file system of the browser, with milestone significance, although not yet fully mature, But it's enough to give developers more space to imagine.

1. FileReader Object

The FileReader object is designed to read files and to convert files into various format information. Using the FileReader object is very simple, and the FileReader object instance contains altogether 4 methods, as shown in table 2.8.

Table 2.8 FileReader Object Methods

Method name	Description
Readasbinarystring	To read a file as a binary code
Readasdataurl	Reads a file as Dataurl, a string that begins with data:
Readastext	Reads a file as text, the 2nd parameter is the encoding type, and the default is UTF-8
Abort	Interrupt Read

The following example shows the use of the Readasdataurl method in the FileReader object, with the following code:

<! DOCTYPE html>  
　　
Tip: The sample code for filesystem in this section is tested under Chrome 28.
The example opens with the same effect as in Figure 2.19. Click the "Select File" button to select the local picture, and the "Select File" button appears below the selection of the selected picture, as shown in effect 2.21.
Figure 2.21 FileReader Object Readasdataurl method use
example, when the user selects the picture, triggers the change event for the input element, and creates a new instance of the FileReader object in the callback event to read the picture file contents, and the picture file returned in the format as follows:
Data:[<mime-type>][;charset=<encoding>][;base64],<data>  
　　
The image is converted to Dataurl data, the BASE64 format data, which can be given and displayed by the SRC attribute of the image element.
Hint: BASE64 data format description can refer to URL http://en.wikipedia.org/wiki/Data_URI_scheme.
FileReader, as part of filesystem, is commonly used for file reads and can be used in conjunction with upload file scenarios.
To learn about the other parts of filesystem syntax and examples, take a look at this book.
Study HTML5 The best book is "HTML5 Web development Example of the detailed", using code learning case study, can be more interesting than reading text!!! A book to fix HTML5, starting from now.