Free HTML5 serial came to the "HTML5 Web development Case Specific explanation" serial (iv) HTML5 filesystem interface

HTML 5 joins the filesystem-related application interface in addition to the file object that is used to get information about the files.

FileSystem is carefully categorized for 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 access to folders and file systems. The advent of the FileSystem feature is a breakthrough in the file system of the browser, with milestone significance, though not yet fully fledged. But it's enough to give developers more space to imagine.

1. FileReader Object

The FileReader object is designed to read files. The ability to convert files to various format information at the same time.

Using the FileReader object very Easy,filereader The object instance consists of 4 methods, as seen 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	Read the file as text, the 2nd parameter is the encoding type, the default feeling UTF-8
Abort	Interrupt Read

The following demonstrates the use of the Readasdataurl method in an FileReader object by demonstrating the sample. The code is as follows:

<! DOCTYPE html>


Tip: The Demo sample code for filesystem in this section is tested in Chrome 28.
The demo sample opens with the same effect as in Figure 2.19. Click the Select File button. With the local picture selected, the content of the selected picture appears below the Select File button, as seen in effect 2.21.

Figure 2.21 FileReader Object Readasdataurl method use
In the demo sample, when the user selects the picture. Triggers the change event for the INPUT element. Create a new instance of the FileReader object in the callback event to read the picture file contents. The picture file that is being read returns the following format:
Data:[<mime-type>][;charset=<encoding>][;base64],<data>

The image is converted to Dataurl data, which is the BASE64 format data. This data can be given and displayed by the SRC attribute of the image element.
Hint: The description of BASE64 data format can refer to URL http://en.wikipedia.org/wiki/Data_URI_scheme.
FileReader as part of the filesystem. Often used for file reads. Can be used in conjunction with upload file scenarios.
To find out more about some of the other grammar and presentation examples in filesystem, take a look at this book.


Learning HTML5 The best book is "HTML5 Web development Example specific explanation", using code learning case study, can be more interesting than reading text!
！
！
A book to fix the HTML5, from now on start.
 
Free HTML5 serial came to the "HTML5 Web development Case Specific explanation" serial (iv) HTML5 filesystem interface