FileReader.readAsDataURL()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.
O método readAsDataURL é usado para ler o conteúdo do tipo Blob ou File.
Quando a operação de leitura acaba, a flag readyState muda para DONE e o evento loadend é disparado.
Então o atributo result irá conter a URL codificada em base64 do arquivo.
Sintaxe
instanceOfFileReader.readAsDataURL(blob);
Parametros
Exemplo
HTML
<input type="file" onchange="previewFile()"><br> <img src="" height="200" alt="Prévia da imagem...">
JavaScript
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
Demo
Exemplo de leitura com múltiplos arquivos
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 do FileReader() não é suportado por versões anteriores à 10 do Internet Explorer. Para uma maior compatibilidade você pode ver os exemplos prévia de imagem básica ou prévia de imagem avançada.
Especificações
| Specification |
|---|
| File API # readAsDataURL |