It is used to read the file into the memory and read the data in the file. The FileReader interface provides an asynchronous API that uses this API to access the file system asynchronous in the browser's main thread to read the data in the file. At present, only FF3.6+and Chrome6.0+have implemented the Filereader interface.
1. The method of FileReader interfaceThere are 4 methods for the FileReader interface, three of which are used to read files, and the other is used to interrupt read. Regardless of the success or failure, the method will not return to the reading results. This result is stored in the Result attribute.
The method of FileReader interface
| Method name | parameter | describe |
|---|---|---|
| ReadasbinaryString | file | Read the file into binary coding |
| Readastext | file, [Encoding] | Read the file as text |
| Readasdataurl | file | Read the file as dataurl |
| abort | (None) | Terminal reading operation |
The FileReader interface contains a complete event model to capture the state when reading the file.
Filereader interface event
| event | describe |
| onabort | Interrupt |
| onerror | Go wrong |
| onloadStart | start |
| Onprogress | Read |
| onLoad | Successfully read |
| onLoadend | Completed, no matter if success and failure |
<script Type = Text/Javascript> Var Result = Document.GetelementByid (Result); VAR FILE = DOCUMENT.GetelementByid (File); judge whether the browser supports the FileRereader interface ifof fileder == 'undefined') {result. Innerhtml = <p> Your browser does not support the Filereader interface! </p>; // Make the selection control unwanted File.SetATTRIBUTE (disabled, disabled);} Function readasdataUrl () {// Test whether it is image file var foot = document.getelementByid (file). Files [0 ]; if (!/IMAGE /// W+/. Test (file.type)) {Alert (see clearly, this requires pictures!); Return false;} var Reader = new filereader (); // Read the file in the form of data urll Reader.Readasdataurl (File); Reader.Onload = Function (E) {var result = document.GetelementByid (result); // Display file result.innerhtml = '<IMG src = ' + this.Result +'}} Function readasbinaryString () {var file = document.GetelementByid (File). Files [0]; VAR Reader = New FileRereader (); g (file); Reader.onload = Function (f) {var result = document.GetelementByid (result); // Display file result.innerHtml = this.Result;} Function Readastext () {VAR FILE = TByid (File). Files [0]; VAR Reader = new filereader (); // Read the file into the page Reader.Readastext (File); Reader.onload = Function (f) {var Result = Document.GetelementByid (Result); // Display file RE Sult.innerhtml = this.Result;}} </script> <p> <Label> Please select a file: </label> <input type = file id = file/> <input type = Button value = Read the image onCLICK = ReadasDataRl () /> <input type = Button value = Read the binary data onClick = readasbinaryString () /> <input type = button value = read text file onCLICK = Readastext () /> < /p> <div ID = result name = result > </div> SummarizeThe above is the example of the FileReader interface in HTML5 introduced by Xiaobian to you. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!