FileReader Interface
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.
Extends
Constructors
Code new FileReader() #
FileReader();
Static Fields
Methods
Code void abort() #
Aborts the read operation. Upon return, the readyState
will be DONE
.
Parameters
None.
Exceptions thrown
DOM_FILE_ABORT_ERR
abort()
was called while no read operation was in progress (that is, the state wasn'tLOADING
).Note: This exception was not thrown by Gecko until Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) .
void abort();
Code FileReaderEvents get on() #
FileReaderEvents get on();
Code 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.
Parameters
blob
- The DOM
Blob
orFile
to read into theArrayBuffer
.
void readAsArrayBuffer(Blob blob);
Code void readAsBinaryString(Blob blob) #
Starts reading the contents of the specified Blob
, which may be a 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 the raw binary data from the file.
void readAsBinaryString(Blob blob);
Code 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 readAsDataURL(Blob blob);
Code 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.
Parameters
void readAsText(Blob blob, [String encoding]);
Code void $dom_addEventListener(String type, EventListener listener, [bool useCapture]) #
void $dom_addEventListener(String type, EventListener listener, [bool useCapture]);
Code void $dom_removeEventListener(String type, EventListener listener, [bool useCapture]) #
void $dom_removeEventListener(String type, EventListener listener, [bool useCapture]);
Fields
Code final FileError error #
final FileError error;
Code final Object result #
final Object result;
This page includes content from the Mozilla Foundation that is graciously licensed under a Creative Commons: Attribution-Sharealike license. Mozilla has no other association with Dart or dartlang.org. We encourage you to improve the web by contributing to The Mozilla Developer Network.