Home > Developer > Web Develop
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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
