FileReader
FileReader
This page has been flagged with the following issues:
High-level issues:
W3C Working Draft
Summary
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 from a FileList object returned as a result of a user selecting files using the input element, from a drag-and-drop operation's DataTransfer object, or from the mozGetAsFile() API on an HTMLCanvasElement.
Properties
No properties.
Methods
| API Name | Summary |
|---|---|
| abort | Aborts a read operation. |
| readAsArrayBuffer | Returns partial Blob data representing the number of bytes currently loaded (as a fraction of the total), as an ArrayBuffer object. |
| readAsDataURL | Returns the complete data of blob as a Data URL. |
| readAsText | Returns partial Blob data representing the number of bytes currently loaded (as a fraction of the total), decoded into memory according to the encoding determination. |
Events
No events.
Examples
View live examplePreview an image before upload
HTML
<!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/jpg';
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="" 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>
Notes
When the FileReader constructor is invoked, a new FileReader object is returned. This FileReader object enables asynchronous reads on individual File objects by firing progress events as the read occurs to event handler methods attached to the FileReader object.
Related specifications
| Specification | Status | Related Changes |
|---|---|---|
| W3C File API Specification | W3C Working Draft |
Compatibility
Desktop
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic Support | 22.0 | 15.0 | 10.0 | 12.1 |
6.0 |
Mobile
| Feature | Android | BlackBerry | Chrome for mobile | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Opera Mini | Safari Mobile |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 3.0 | 10.0 | ? | ? | ? | ? | Unsupported | 6.0 |
This article contains content originally from external sources.
Portions of this content come from the Mozilla Developer Network 
.
Portions of this content come from the Microsoft Developer Network: Windows Internet Explorer API reference Article
This tool helps to make and review comments inline.
How to Use
insert instructions, with images, here