O método readAsDataURL
é utilizado para ler os conteúdos dum Blob
ou File
especificado. Quando a operação de leitura é terminada, a propriedade readyState
é atualizada para DONE
, e o evento loadend
é lançado. Nessa altura, o atributo result
contem os dados na forma data: URL que representa os dados do ficheiro em base 64 numa string.
Nota: Oresult
da Blob não pode ser diretamente descodificado como Base64 sem remover a declaração Data-URL que precede os dados em Base64. Para ter só a string em Base64, primeiro tem de remover o data:*/*;base64,
do resultado.
Sintaxe
instanceOfFileReader.readAsDataURL(blob);
Parametros
Exemplo
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 () {
// converter o file de imagem oara uma string de base 64
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
Resultado
Exemplo de vários 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);
}
}
Nota: O construtor
FileReader()
não é apoiado pela Internet Explorer anterior à versão 10. Para obter código totalmente compatível veja a nossa solução crossbrowser para pré-visualizar imagens. Veja também este exemplo mais complexo.Especificações
Especificação | Estado | Comentário |
---|---|---|
File API The definition of 'readAsDataURL()' in that specification. |
Working Draft | Definição inicial |
Compatibilidade
BCD tables only load in the browser
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.