The readAsDataURL
method is used to read the contents of the specified Blob
or File
. When the read operation is finished, the readyState
becomes DONE
, and the loadend
is triggered. At that time, the result
attribute contains the data as a
URL representing the file's data as a base64 encoded string.
Syntax
instanceOfFileReader.readAsDataURL(blob);
Parameters
Example
HTML
<input type="file" onchange="previewFile()"><br> <img src="" height="200" alt="Image preview...">
JavaScript
function previewFile() { var preview = document.querySelector('img'); var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); reader.addEventListener("load", function () { preview.src = reader.result; }, false); if (file) { reader.readAsDataURL(file); } }
Live Result
Example reading multiple files
HTML
<input id="browse" type="file" onchange="previewFiles()" multiple> <div id="preview"></div>
JavaScript
function previewFiles() { var preview = document.querySelector('#preview'); var files = document.querySelector('input[type=file]').files; function readAndPreview(file) { // Make sure `file.name` matches our extensions criteria if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { var reader = new FileReader(); reader.addEventListener("load", function () { var image = new Image(); image.height = 100; image.title = file.name; image.src = this.result; preview.appendChild( image ); }, false); reader.readAsDataURL(file); } } if (files) { [].forEach.call(files, readAndPreview); } }
FileReader()
constructor was not supported by Internet Explorer for versions before 10. For a full compatibility code you can see our crossbrowser possible solution for image preview. See also this more powerful example.Specifications
Specification | Status | Comment |
---|---|---|
File API The definition of 'FileReader' in that specification. |
Working Draft | Initial definition |
Browser compatibility
Feature | Firefox (Gecko) | Chrome | Edge | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 3.6 (1.9.2)[1] | 7 | (Yes) | 10[2] | 12.02[3] | 6.0 |
Feature | Firefox Mobile (Gecko) | Android | Edge | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 32 | 3 | (Yes) | 10 | 11.5 | 6.0 |
[1] Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all Blob
parameters below were File
parameters; this has since been updated to match the specification correctly. Prior to Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) the FileReader.error
property returned a FileError
object. This interface has been removed and FileReader.error
is now returning the DOMError
object as defined in the latest FileAPI draft.
[2] IE9 has a File API Lab.
[3] Opera has partial support in 11.1.