Free HTML5 serialization: HTML5 webpage development instance details (4) FileSystem interface and HTML5 instance in html5

Source: Internet
Author: User

Free HTML5 serialization: HTML5 webpage development instance details (4) FileSystem interface and HTML5 instance in html5

In addition to File objects used to obtain File information, HTML 5 also adds FileSystem-related application interfaces. FileSystem classifies different processing functions in detail, for example, FileReader and FileList objects used for file reading and processing, Blob and FileWriter objects used for file creation and writing, DirectoryReader and LocalFileSystem objects used for directory and file system access, etc, the emergence of the FileSystem function is a breakthrough in the file system of the browser. It is a milestone. Although it is not yet completely mature, it is sufficient for developers to make full use of their imagination.

1. FileReader object

The FileReader object is used to read files and convert files into various formats. Using the FileReader object is very simple. The FileReader object instance contains four methods, as shown in table 2.8.

Table 2.8 FileReader object Method

Method Name

Description

ReadAsBinaryString

Read the file as a binary code

ReadAsDataURL

Reads a file as a DataURL, a string starting with data:

ReadAsText

Read the file as text, 2nd parameters as encoding type, default is UTF-8

Abort

Interrupted reading

The following example shows how to use the readAsDataURL method in the FileReader object. The Code is as follows:

<! DOCTYPE html> <body> <input type = "file" id = "input"> <br> <! -- File selection control -->  <! -- Image Display --> </body> <script type = "text/javascript"> document. getElementById ("input "). addEventListener ("change", function () {// listen to select the control change event var fileReader = new FileReader (); // create a FileReader object instance fileReader. onloadend = function (e) {// listens to the instance loadend event document. getElementById ("img "). src = e.tar get. result; // set the image base64 value}; fileReader. readAsDataURL (this. files [0]); // Read File Content}, false); </script> 


Tip: The sample code of FileSystem in this section is successfully tested in Chrome 28.

The Running Effect of the example is the same as that in Figure 2.19. Click the select file button to select the local image. The content of the selected image is displayed at the bottom of the select file button, as shown in Figure 2.21.


Figure 2.21 use the readAsDataURL method of the FileReader object

In this example, When you select an image, the change event of the input element is triggered. In the callback event, an instance of a new FileReader object is created to read the image file content, the returned format of the read image file is as follows:

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

The image is converted to DataURL data, that is, Base64 format data, which can be obtained and displayed by the src attribute assigned to the image element.

Tip: For details about Base64 data format, refer to http://en.wikipedia.org/wiki/data_uri_scheme.

FileReader is a part of FileSystem and is usually used for file reading. It can be used in combination with the upload scenario.

Let's take a look at some of the other syntaxes and examples in FileSystem.



The best book to learn HTML5 is "HTML5 web development instance details". It is much more interesting to use code to learn and use case studies !!! One book handles HTML5, starting from now on.




Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.