Read file contents using the FileReader interface

If you want to read or browse the file, you need to pass the FileReader interface, which not only can read the picture file, but also can read the text or binary files, and according to the interface provided by the event and method, you can dynamically detect the file read the detailed state, next, We describe in detail how the FileReader interface is used.

FileReader interface

The FileReader interface provides an asynchronous API through which the data in the file system can be accessed asynchronously from the main thread of the browser, and for this reason the FileReader interface can read the data in the file and put the read data into memory.

When accessing different files, you must recall the constructor of the FileReader interface, because each time the FileReader interface returns a new FileReader object, you can implement data that accesses different files.

The FileReader interface provides a complete set of event handling mechanisms for detecting the various process states of FileReader objects when reading or returning data, and the common events for FileReader interfaces are shown in the following table:

In the FileReader interface, in addition to providing common events, there are many common methods for reading files or responding to events, such as the Onabort event firing, call the Abort () method, the common method of FileReader interface is as shown in the following table:

For the methods in the FileReader interface, use the following instructions:

When the Readasbinarystring () method is called, the block of data returned by the file object is read into memory as a binary string.

When the Readasarraybuffer () method is called, the number of data bytes returned by the file object is read into memory as an array buffer.

When you call the Readastext () method, where the encoding parameter represents the way the text file is encoded, the default value is Utf-8, which is to read the obtained block of data into memory as text in UTF-8 encoded format.

When the Readasdataurl () method is called, the data block returned by the file object is displayed in a page as a string of data URL characters, which generally reads a file with a smaller chunk of data.

Previewing a picture file using the FileReader method

In the previous instance, the Blob interface allows access to file data blocks for file-related information. However, if you want to read the file, you also need to read the data into memory or page through the method in the FileReader interface, for example, the small size picture file, you can get the file data asynchronously read by the API through the Readasdataurl () method in the FileReader interface. Save as a data URL, the URL binding the "src" attribute value of the element, you can achieve the effect of picture file preview.

The following example shows the process of previewing a picture using the Readasdataurl () method.

Instance using the Readasdataurl () method to preview a picture

1. Function description

In the page form, add a "file" type of <input> element, to choose to upload the file, and set the value of the property "multiple" to "true", that is allowed to upload multiple files, click the "Select File" button, if you select a picture file, will be displayed in the page, to implement the image preview function before uploading.

2. Implementation code

Code Listing using the Readasdataurl () method to preview a picture

In the instance, the page imports a JavaScript file, Js6.js, in which the Fileupload_previmagefile () method is called, which accesses the FileReader interface and returns the file to the page as a data URL. The code that implements it is shown in code listing 5-6-2:

JavaScript files in a code listing instance Js6.js source

3. Page effects

Page effects that the page performs in Chrome 10 browser:

4. SOURCE Analysis

In this example, the process of picture preview is essentially the process of displaying the picture file after it is read in the page, in order to implement this process, it is necessary to refer to the Read file method provided in the FileReader Interface Readasdataurl (), before referencing the interface, considering the compatibility of each browser to the interface , the JavaScript code first detects whether the user's browser supports the FileReader object and, if not, prompts for an error message.

Next, in JavaScript code, iterate through the collection of uploaded files, get each "file" object, because each file returns a different block of data, so each time before reading the file, you must first refactor a new FileReader object, and then, Each file is read into the page as a data URL, and when the read succeeds, the trigger (onload) event, in which the result property gets the URL address of the file read-in page, binds the address to the element, and finally, the list ID number is " Ulupload "list elements, displayed in the page, to achieve the effect of uploading the image file preview, detailed implementation of the process as shown in the bold section of the JavaScript code.

Reprint Address: http://blog.sina.com.cn/s/blog_8e39cdcf0102wkbl.html

Read file contents using the FileReader interface