public interface FileReader extends EventTarget
The FileReader
object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File
or Blob
objects to specify the file or data to read. File objects may be obtained in one of two ways: from a FileList
object returned as a result of a user selecting files using the <input>
element, or from a drag and drop operation's DataTransfer
object.
To create a FileReader
, simply do the following:
var reader = new FileReader();
See Using files from web applications for details and examples.
Modifier and Type | Field and Description |
---|---|
static int |
DONE
The entire read request has been completed.
|
static int |
EMPTY
No data has been loaded yet.
|
static int |
LOADING
Data is currently being loaded.
|
Modifier and Type | Method and Description |
---|---|
void |
abort()
Aborts the read operation.
|
EventRemover |
addEventListener(String type,
EventListener listener)
Register an event handler of a specific event type on the
EventTarget . |
EventRemover |
addEventListener(String type,
EventListener listener,
boolean useCapture)
Register an event handler of a specific event type on the
EventTarget . |
boolean |
dispatchEvent(Event evt)
Dispatch an event to this
EventTarget . |
FileError |
getError()
The error that occurred while reading the file.
|
EventListener |
getOnabort()
Called when the read operation is aborted.
|
EventListener |
getOnerror()
Called when an error occurs.
|
EventListener |
getOnload()
Called when the read operation is successfully completed.
|
EventListener |
getOnloadend()
Called when the read is completed, whether successful or not.
|
EventListener |
getOnloadstart()
Called when reading the data is about to begin.
|
EventListener |
getOnprogress()
Called periodically while the data is being read.
|
int |
getReadyState()
Indicates the state of the
FileReader . |
Object |
getResult()
The file's contents.
|
void |
readAsArrayBuffer(Blob blob)
|
void |
readAsBinaryString(Blob blob)
|
void |
readAsDataURL(Blob blob)
|
void |
readAsText(Blob blob)
Starts reading the specified blob's contents.
|
void |
readAsText(Blob blob,
String encoding)
Starts reading the specified blob's contents.
|
void |
removeEventListener(String type,
EventListener listener)
Removes an event listener from the
EventTarget . |
void |
removeEventListener(String type,
EventListener listener,
boolean useCapture)
Removes an event listener from the
EventTarget . |
void |
setOnabort(EventListener arg) |
void |
setOnerror(EventListener arg) |
void |
setOnload(EventListener arg) |
void |
setOnloadend(EventListener arg) |
void |
setOnloadstart(EventListener arg) |
void |
setOnprogress(EventListener arg) |
static final int DONE
static final int EMPTY
static final int LOADING
FileError getError()
EventListener getOnabort()
void setOnabort(EventListener arg)
EventListener getOnerror()
void setOnerror(EventListener arg)
EventListener getOnload()
void setOnload(EventListener arg)
EventListener getOnloadend()
onload
or onerror
.void setOnloadend(EventListener arg)
EventListener getOnloadstart()
void setOnloadstart(EventListener arg)
EventListener getOnprogress()
void setOnprogress(EventListener arg)
int getReadyState()
FileReader
. This will be one of the State constants. Read only.Object getResult()
void abort()
Aborts the read operation. Upon return, the readyState
will be DONE
.
None.
DOM_FILE_ABORT_ERR
abort()
was called while no read operation was in progress (that is, the state wasn't LOADING
).
EventRemover addEventListener(String type, EventListener listener)
EventTarget
EventTarget
.addEventListener
in interface EventTarget
EventRemover addEventListener(String type, EventListener listener, boolean useCapture)
EventTarget
EventTarget
.addEventListener
in interface EventTarget
boolean dispatchEvent(Event evt)
EventTarget
EventTarget
.dispatchEvent
in interface EventTarget
void readAsArrayBuffer(Blob blob)
Starts reading the contents of the specified Blob
or File
. When the read operation is finished, the readyState
will become DONE
, and the onloadend
callback, if any, will be called. At that time, the result
attribute contains an ArrayBuffer
representing the file's data.
blob
Blob
or File
to read into the ArrayBuffer
.void readAsBinaryString(Blob blob)
void readAsDataURL(Blob blob)
Starts reading the contents of the specified Blob
or File
. When the read operation is finished, the readyState
will become DONE
, and the onloadend
callback, if any, will be called. At that time, the result
attribute contains a data:
URL representing the file's data.
This method is useful, for example, to get a preview of an image before uploading it:
<!doctype html> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <title>Image preview example</title> <script type="text/javascript"> oFReader = new FileReader(), rFilter = /^(image\/bmp|image\/cis-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x-cmu-raster|image\/x-cmx|image\/x-icon|image\/x-portable-anymap|image\/x-portable-bitmap|image\/x-portable-graymap|image\/x-portable-pixmap|image\/x-rgb|image\/x-xbitmap|image\/x-xpixmap|image\/x-xwindowdump)$/i; oFReader.onload = function (oFREvent) { document.getElementById("uploadPreview").src = oFREvent.target.result; }; function loadImageFile() { if (document.getElementById("uploadImage").files.length === 0) { return; } var oFile = document.getElementById("uploadImage").files[0]; if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; } oFReader.readAsDataURL(oFile); } </script> </head> <body onload="loadImageFile();"> <form name="uploadForm"> <table> <tbody> <tr> <td><img id="uploadPreview" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" /></td> <td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td> </tr> </tbody> </table> <p><input type="submit" value="Send" /></p> </form> </body> </html>
void readAsText(Blob blob)
Starts reading the specified blob's contents. When the read operation is finished, the readyState
will become DONE
, and the onloadend
callback, if any, will be called. At that time, the result
attribute contains the contents of the file as a text string.
void readAsText(Blob blob, String encoding)
Starts reading the specified blob's contents. When the read operation is finished, the readyState
will become DONE
, and the onloadend
callback, if any, will be called. At that time, the result
attribute contains the contents of the file as a text string.
void removeEventListener(String type, EventListener listener)
EventTarget
EventTarget
.removeEventListener
in interface EventTarget
void removeEventListener(String type, EventListener listener, boolean useCapture)
EventTarget
EventTarget
.removeEventListener
in interface EventTarget
Copyright © 2018. All rights reserved.