FileReader API file operation

File API File operations

FileReader：

Use FileReader object ,web Applications can read files stored on the user's computer asynchronously ( Or raw data buffering ) Content , have access to File Object or Blob Object to specify the file or data to be processed . among File Objects can be returned by the user after selecting a file on an element FileList object , It can also be generated from drag and drop operations DataTransfer object , It can also come from a HTMLCanvasElement On the implementation mozGetAsFile() Return result after method .

FileReader API How it works and File API equally , Need to use input[type="file"] Elements ：

<--  A form that can upload multimedia files  -->

<input type="file" id="upload-file" multiple />

<--  Where the picture is displayed  -->

<div id="destination"></div>

Secure way from user （ long-range ） Read the contents of the file in the system . It cannot be used to simply from the file system by path .

     Important note ：FileReader Used only to read files by name . To be in JavaScript Read file by pathname , Standard... Shall be used Ajax Solution for server-side file reading , If reading across domains , It should have CORS jurisdiction .

FileReader.error  read-only

One DOMException Represents an error in reading the file .

FileReader.readyState  read-only

A number , Indicates the status of the FileReader. This is one of the following ：

EMPTY	0	No data has been loaded .
LOADING	1	Currently loading data .
DONE	2	The entire read request has been completed .

FileReader.result  read-only

The content of the document . This property is valid only after the read operation is completed , And the format of the data depends on the method used to start the read operation .

Event handler

FileReader.onabort

abort Event handler . This event is triggered every time the read operation is aborted .

FileReader.onerror

error Event handler . Whenever a read operation encounters an error , Will trigger this event .

FileReader.onload

load Event handler . Whenever the read operation completes successfully , Will trigger this event .

FileReader.onloadstart

loadstart Event handler . This event is triggered every time a read is started .

FileReader.onloadend

loadend Event handler . Each read operation is completed （ Success or failure ） Will trigger this event .

FileReader.onprogress

progress Event handler . Read Blob This event is triggered when the content .

because FileReader Inherited from EventTarget, All these events can also be used addEventListener Method listening .

Method

FileReader.abort()

Abort read operation . return ,readyState Will be for DONE.

FileReader.readAsArrayBuffer()

Start reading the specified content Blob, After completion , The result Property contains a ArrayBuffer Represents the attributes of file data .

FileReader.readAsBinaryString()

Start reading the specified content Blob, After completion , The result Property contains raw binary data from the file as a string .

FileReader.readAsDataURL()

Start reading the specified content Blob, After completion , The result Property contains a data: Represents the of file data URL.

FileReader.readAsText()

Start reading the specified content Blob, After completion ,result Property contains the text string of the file content . You can specify an optional encoding name .

memorabilia

Use addEventListener() Or by assigning event listeners to this interface oneventname Property to listen for these events .

abort

When reading aborts （ for example , Due to program call ） Trigger when FileReader.abort().

Can also pass onabort Attribute gets .

error

Triggered when the read fails due to an error .

Can also pass onerror Attribute gets .

load

Triggered when the read completes successfully .

Can also pass onload Attribute gets .

loadend

Triggered when the read succeeds or fails .

Can also pass onloadend Attribute gets .

loadstart

Triggered at the start of the read .

Can also pass onloadstart Attribute gets .

progress

Trigger periodically when reading data .

Can also pass onprogress Attribute gets .

Browser compatibility ：

FileReader - Web APIs | MDN