Home > Developer > Web Develop
The FileReader object allows a Web application to asynchronously read the contents of a file stored on a computer, using a file or Bolb object to specify which files or data to read. Where the file object can be a FileList object returned from the user selecting a file on a <input> element, or a DataTransfer object generated from a drag-and-drop operation. The result can also be returned from the Mozgetasfile () method executed on a htmlcanvaselement.
Property Filereader.errorAn error occurred while reading the file
Filereader.readystate| Constant name | Value | Describe |
| EMPTY | 0 | No data has been loaded yet |
| LOADING | 1 | Data is being loaded |
| Done | 2 | All read requests completed |
This property is valid only after the read operation is complete, and the data format depends on which method is used for the read operation. Returns the contents of the file.
Event Handling Filereader.onabortHandles the Abort event, which is triggered when the read operation is interrupted.
Filereader.onerrorHandles the error event, which is triggered when a read error occurs.
Filereader.onloadHandles the Load event, which is triggered when the read operation completes.
Filereader.onloadstartHandles the Loadstart event, which is triggered at the start of a read operation.
Filereader.onloadendHandles the Loadend event, which is triggered at the end of the read operation (either succeeds or fails).
Filereader,onprogressHandles the progress event, which is triggered when the Bolb is read.
Method Filereader.abort ()Aborts the read operation, and when returned, the property of the readystate is done
Filereader.readasarraybuffer ()Begins reading the contents of the specified blob, and once completed, the result property will be saved as the Arraybuffer data object of the file being read.
Filereader.readasbinarystring ()Begins reading the contents of the specified blob, and once completed, the result property will contain the original binary data of the file being read.
Filereader.readasdataurl ()Begins reading the contents of the specified blob, and once completed, the result property will contain a string in Data:url format to represent the contents of the file being read.
Filereader.readastext ()Begins reading the contents of the specified blob, and once completed, the result property will contain a string representing the contents of the file being read.
File Upload<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <title>Document</title></Head><Body> <inputtype= "text"name= "Name"value= "1234"> <inputtype= "text"name= "pwd"value= "5678"> <inputtype= "File"name= "File"ID= "File"onchange= "Change ()"> <inputtype= "button"value= "Submit"onclick= "Submit ()"> <imgwidth= "+"ID= "img"alt=""> <Script> varFILEINP=document.getElementById ('file'); varReader= NewFileReader (); varimg=document.getElementById ('img'); functionChange () {varfile=fileinp.files[0]; if(File.size> 0) {reader.readasdataurl (file); }} reader.onload= function() {img.src=Reader.result; } functionSubmit () {varhttp= NewXMLHttpRequest (); Http.open ('POST', '/file', true); Http.onload= function(res) {Console.log (res)}; Http.send ()}</Script></Body></HTML>View Code
FileReader Uploading Files
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
