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 data: URL representing the file's data as a base64 encoded string.
Note: The blob's result
cannot be directly decoded as Base64 without first removing the Data-URL declaration preceding the Base64-encoded data. To retrieve only the Base64 encoded string, first remove data:*/*;base64,
from the result.
Syntax
instanceOfFileReader.readAsDataURL(blob);
Parameters
Example
HTML
<input type="file" onchange="previewFile()"><br> <img src="" height="200" alt="Image preview...">
JavaScript
function previewFile() { const preview = document.querySelector('img'); const file = document.querySelector('input[type=file]').files[0]; const reader = new FileReader(); reader.addEventListener("load", function () { // convert image file to base64 string 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); } }
Note: The
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 'readAsDataURL()' in that specification. |
Working Draft | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
readAsDataURL | Chrome Full support 7 | Edge Full support 12 | Firefox Full support 3.6 | IE Full support 10 | Opera Full support 11 | Safari Full support 6 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android
Full support
32
| Opera Android Full support 11 | Safari iOS Full support 6.1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- See implementation notes.
- See implementation notes.