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 APIThe 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.
Update compatibility data on GitHub
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 Full support 32 Notes' Using the camera in Android 8.x raises an exception. See bug 1511083. |
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.
See also
FileReader.readAsDataURL() by Mozilla Contributors is licensed under CC-BY-SA 2.5.