FileReader.readAsDataURL()
io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/pt-br/web/api/file_api/index.md)
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 unsupported templ: event é 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.