Use of FileReader in HTML 5, htmlfilereader

Use of FileReader in HTML 5, htmlfilereader

The FileReader interface is used to read files into the memory and read data in the files. The FileReader interface provides an asynchronous API that can be used to asynchronously access the file system in the main thread of the browser.

To read the data in the file.

FileReader is easy to use. You can follow the steps below to create a FileReader object and call its method:

1. Check the browser's support for FileReader

<Span style = "font-family: Times New Roman; font-size: 18px; "> <script type =" text/javascript "> if (typeof FileReader =" undefined ") alert (" the browser does not support FileReader "); elsealert ("FileReader supported by browsers"); </script> </span>

2. Call the FileReader object Method

The FileReader instance has four methods, three of which are used to read files, and the other to interrupt reading. The following table lists these methods and their parameters and functions. Note that the method does not return the read result no matter whether the read is successful or fails. The results are stored inResultAttribute.

Method Name	Parameters	Description
Abort	None	Interrupted reading
ReadAsBinaryString	File	Read the file as a binary code
ReadAsDataURL	File	Read the file as DataURL
ReadAsText	File, [encoding]	Read a file as text

ReadAsText:The method has two parameters, the second is the text encoding method, the default value is UTF-8. This method is very easy to understand. It reads the file as text, and the read result is the content in the text file.
ReadAsBinaryString:This method reads a file as a binary string, which is usually transmitted to the backend. the backend can store the file through this string.
ReadAsDataURL:This is the method used in the example program. This method reads the file as a string starting with data:. The essence of this string is Data URL, data URL is a scheme to embed small files into documents directly. A small file is usually a file in the format of image and html.

3. Handle events

FileReader contains a complete set of event models used to capture the status when reading files. The following table summarizes these events.

Event	Description
Onabort	Triggered upon interruption
Onerror	Triggered when an error occurs
Onload	Triggered when the file is read successfully.
Onloadend	Read completion trigger, whether successful or failed
Onloadstart	Triggered when reading starts
Onprogress	Reading

Once the file is read, The result attribute of the instance will be filled in no matter whether it is successful or failed. If reading fails, the value of result is null. Otherwise, it is the result of reading. Most programs will capture this value when the file is successfully read.

4. Example

<Span style = "font-family: Times New Roman; font-size: 18px;"> <! DOCTYPE html> 

Select an image file in the file control and click the read image data button. The running result is as follows:

Select a dll file in the file control and Click Read Binary data. The running result is as follows:

Select a txt file in the file control and Click Read text file. The running result is as follows:


In HTML5, garbled characters appear when reading a txt file containing Chinese characters using readAsText () under FileReader
Encoding problem, what is your Txt file encoding format, you can save it as a memory Gu UFT-8 try

HTML5 FileReader API failure in how to solve?
Which platform is it? Android? Iphone?
If it is an Iphone, it should be the Webkit kernel, which can be debugged using the safari browser.

You can call the FileReader interface to determine whether the browser supports this function. The Code is as follows:
If (window. FileReader) {var fr = new FileReader (); // add your code here} else {alert ("Not supported by your browser! ");}