1, the method of FileReader interface
The FileReader interface has 4 methods, 3 of which are used to read the file and the other to interrupt the read. The method does not return a read result, regardless of the success or failure of the read, which is stored in the result property.
| Method Name | Parameters | Description |
|---|---|---|
| Readasbinarystring | File | To read a file as a binary encoding |
| Readastext | File,[encoding] | To read a file as text |
| Readasdataurl | File | Read the file as Dataurl |
| Abort | (none) | Terminal Read operations |
2. FileReader Interface Event
The FileReader interface contains a complete set of event models for capturing the state when a file is read.
| Event | Describe |
| Onabort | Interrupt |
| OnError | Error |
| Onloadstart | Begin |
| OnProgress | is reading |
| OnLoad | Successfully read |
| Onloadend | Read complete regardless of successful failure |
3, the use of FileReader interface
Determine if the browser supports the FileReader interface if (typeof FileReader = = ' undefined ') { result. Innerhtml= "<p> your browser does not support FileReader interface! </p> "; Make the selection control non -operable file.setattribute ("disabled", "disabled"); } function Readasdataurl () { //Check whether the image file is var, filename = document.getElementById ("file"). Files[0]; if (!/image\/\w+/.test (File.type)) { alert ("See Clearly, this requires a picture! "); return false; } var reader = new FileReader (); Reads the file into the page reader.readasdataurl (file) in the form of the data URL ; Reader.onload=function (e) { var Result=document.getelementbyid ("result"); Show Files result.innerhtml= ' '; } }
function readasbinarystring () { var file = document.getElementById ("file"). Files[0]; var reader = new FileReader (); Reads the file in binary form into the page reader.readasbinarystring (file); Reader.onload=function (f) { var Result=document.getelementbyid ("result"); Show file result.innerhtml=this.result; } }
function Readastext () { var file = document.getElementById ("file"). Files[0]; var reader = new FileReader (); Reads the file into the page reader.readastext (file) in text form ; Reader.onload=function (f) { var Result=document.getelementbyid ("result"); Show file result.innerhtml=this.result; }
Example--demo
<!doctype html>
HTML5 read local file FileReader API interface
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
