Introdução
O HTML5 finalmente fornece um formato padrão de interação com arquivos locais por meio da especificação da API de arquivos (link em inglês). Como exemplo de seus recursos, a API de arquivos pode ser utilizada para criar uma visualização em miniatura das imagens ao serem enviadas para o servidor ou permitir que o aplicativo salve uma referência do arquivo quando o usuário estiver off-line. Além disso, você pode utilizar a lógica do lado do cliente para confirmar se o mimetype de um upload corresponde a sua extensão de arquivo ou restringir o tamanho de um upload.
A especificação fornece diversas interfaces para acessar arquivos a partir de um sistema de arquivos "local":
File- um arquivo individual, oferece informações somente leitura como nome, tamanho de arquivo, mimetype e uma referência ao identificador de arquivo.FileList- uma sequência tipo matriz de objetosFile. Exemplos são<input type="file" multiple>ou arrastar um diretório ou arquivos a partir da área de trabalho.Blob- permite o recorte de um arquivo em intervalos de bytes.
Ao ser usada em conjunto com as estruturas de dados acima, a interface FileReader pode ser utilizada para ler um arquivo de forma assíncrona por meio da manipulação de eventos do JavaScript. Assim, é possível monitorar o progresso da leitura, encontrar erros e determinar quando o carregamento é concluído. De várias maneiras, as APIs são semelhantes ao modelo de evento XMLHttpRequest.
Observação: no momento da criação deste tutorial, as APIs necessárias para o uso de arquivos locais são compatíveis com o Google Chrome 6.0 e o Firefox 3.6. No caso do Firefox 3.6.3, o método File.slice() não é compatível.
Seleção de arquivos
O primeiro passo é verificar se o navegador é totalmente compatível com a API de arquivos:
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
} else {
alert('The File APIs are not fully supported in this browser.');
}
Se seu aplicativo precisa somente de algumas dessas APIs, modifique o snippet de acordo.
Como utilizar a entrada de formulário para selecionar
A forma mais direta de carregar um arquivo é utilizar o elemento padrão <input type="file">. O JavaScript retorna a lista de objetos File selecionados como uma FileList. Este exemplo usa o atributo "multiple" para permitir a seleção de diversos arquivos de uma única vez:
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate.toLocaleDateString(), '</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
Exemplo: como utilizar a entrada de formulário para selecionar. Experimente!
Como utilizar arrastar e soltar para selecionar
Outra técnica de carregamento de arquivos é a função nativa arrastar e soltar a partir da área de trabalho para o navegador. Podemos modificar ligeiramente o exemplo anterior para incluir compatibilidade com a função arrastar e soltar.
<div id="drop_zone">Drop files here</div>
<output id="list"></output>
<script>
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate.toLocaleDateString(), '</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
</script>
Exemplo: como utilizar arrastar e soltar para selecionar. Experimente!
Observação: alguns navegadores tratam os elementos <input type="file"> como fins nativos onde os arquivos podem ser soltos. Tente arrastar arquivos para o campo "input" do exemplo anterior.
Como ler arquivos
Agora vem a parte divertida!
Depois de obter uma referência de File, crie uma instância do objetoFileReader para ler seu conteúdo na memória. Quando o carregamento for concluído, o evento onload será iniciado e seu atributo result poderá ser utilizado para acessar os dados do arquivo.
O FileReader inclui quatro opções de leitura de arquivo de forma assíncrona:
FileReader.readAsBinaryString(Blob|File)- a propriedaderesultconterá os dados do arquivo/blob como uma sequência binária. Cada byte é representado por um número inteiro dentro do intervalo [0..255].FileReader.readAsBinaryString(Blob|File)- a propriedaderesultconterá os dados do arquivo/blob como uma string de texto. Por padrão, a string é decodificada como 'UTF-8'. O uso do parâmetro opcional de codificação pode especificar um formato diferente.FileReader.readAsDataURL(Blob|File)- a propriedaderesultconterá os dados do arquivo/blob codificados como um URL de dados.FileReader.readAsArrayBuffer(Blob|File)- a propriedaderesultconterá os dados do arquivo/blob codificados como um objeto ArrayBuffer.
Assim que um desses métodos for solicitado no objeto FileReader, onloadstart, onprogress, onload, onabort, onerror e onloadend poderão ser utilizados para acompanhar seu progresso.
O exemplo abaixo filtra imagens selecionadas pelo usuário, solicita reader.readAsDataURL() no arquivo e renderiza uma miniatura ao configurar o atributo "src" como um URL de dados.
<style>
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
Exemplo: como ler arquivos. Experimente!
Experimente este exemplo com um diretório de imagens!
Como dividir um arquivo
Em alguns casos, a leitura integral de um arquivo na memória não é a melhor opção. Por exemplo, digamos que você queira criar um uploader de arquivos assíncrono. Uma forma possível de acelerar o processo de upload seria ler e enviar o arquivo em partes de diferentes intervalos de bytes. O componente servidor seria então responsável por reconstruir o conteúdo do arquivo na ordem correta.
Felizmente, a interface File é compatível com um método de divisão que oferece compatibilidade com este uso. O método usa um byte inicial como primeiro argumento, um byte final como segundo e uma string de tipo de conteúdo opcional como terceiro. A semântica desse método foi modificada recentemente, por isso recebeu um prefixo do fornecedor:
if (file.webkitSlice) {
var blob = file.webkitSlice(startingByte, endindByte);
} else if (file.mozSlice) {
var blob = file.mozSlice(startingByte, endindByte);
}
reader.readAsBinaryString(blob);
O exemplo a seguir demonstra a leitura de pedaços de arquivo. É importante notar que este processo utiliza o evento onloadend e verifica evt.target.readyState em vez de utilizar o evento onload.
<style>
#byte_content {
margin: 5px 0;
max-height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
#byte_range { margin-top: 5px; }
</style>
<input type="file" id="files" name="file" /> Read bytes:
<span class="readBytesButtons">
<button data-startbyte="0" data-endbyte="4">1-5</button>
<button data-startbyte="5" data-endbyte="14">6-15</button>
<button data-startbyte="6" data-endbyte="7">7-8</button>
<button>entire file</button>
</span>
<div id="byte_range"></div>
<div id="byte_content"></div>
<script>
function readBlob(opt_startByte, opt_stopByte) {
var files = document.getElementById('files').files;
if (!files.length) {
alert('Please select a file!');
return;
}
var file = files[0];
var start = parseInt(opt_startByte) || 0;
var stop = parseInt(opt_stopByte) || file.size - 1;
var reader = new FileReader();
// If we use onloadend, we need to check the readyState.
reader.onloadend = function(evt) {
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
document.getElementById('byte_content').textContent = evt.target.result;
document.getElementById('byte_range').textContent =
['Read bytes: ', start + 1, ' - ', stop + 1,
' of ', file.size, ' byte file'].join('');
}
};
if (file.webkitSlice) {
var blob = file.webkitSlice(start, stop + 1);
} else if (file.mozSlice) {
var blob = file.mozSlice(start, stop + 1);
}
reader.readAsBinaryString(blob);
}
document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
if (evt.target.tagName.toLowerCase() == 'button') {
var startByte = evt.target.getAttribute('data-startbyte');
var endByte = evt.target.getAttribute('data-endbyte');
readBlob(startByte, endByte);
}
}, false);
</script>
Exemplo: como dividir um arquivo. Experimente!
Como monitorar o progresso de uma leitura
Uma das coisas legais que ganhamos de graça ao utilizar a manipulação assíncrona de eventos é a capacidade de monitorar o progresso da leitura do arquivo. Isso é útil para arquivos grandes, para encontrar erros e para descobrir quando uma leitura está concluída.
Os eventos onloadstart e onprogress podem ser utilizados para monitorar o progresso de uma leitura.
O exemplo abaixo demonstra a exibição de uma barra de progresso para monitorar o status de uma leitura. Para ver o indicador de progresso em ação, experimente usar um arquivo grande ou de um disco remoto.
<style>
#progress_bar {
margin: 10px 0;
padding: 3px;
border: 1px solid #000;
font-size: 14px;
clear: both;
opacity: 0;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
}
#progress_bar.loading {
opacity: 1.0;
}
#progress_bar .percent {
background-color: #99ccff;
height: auto;
width: 0;
}
</style>
<input type="file" id="files" name="file" />
<button onclick="abortRead();">Cancel read</button>
<div id="progress_bar"><div class="percent">0%</div></div>
<script>
var reader;
var progress = document.querySelector('.percent');
function abortRead() {
reader.abort();
}
function errorHandler(evt) {
switch(evt.target.error.code) {
case evt.target.error.NOT_FOUND_ERR:
alert('File Not Found!');
break;
case evt.target.error.NOT_READABLE_ERR:
alert('File is not readable');
break;
case evt.target.error.ABORT_ERR:
break; // noop
default:
alert('An error occurred reading this file.');
};
}
function updateProgress(evt) {
// evt is an ProgressEvent.
if (evt.lengthComputable) {
var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
// Increase the progress bar length.
if (percentLoaded < 100) {
progress.style.width = percentLoaded + '%';
progress.textContent = percentLoaded + '%';
}
}
}
function handleFileSelect(evt) {
// Reset progress indicator on new file selection.
progress.style.width = '0%';
progress.textContent = '0%';
reader = new FileReader();
reader.onerror = errorHandler;
reader.onprogress = updateProgress;
reader.onabort = function(e) {
alert('File read cancelled');
};
reader.onloadstart = function(e) {
document.getElementById('progress_bar').className = 'loading';
};
reader.onload = function(e) {
// Ensure that the progress bar displays 100% at the end.
progress.style.width = '100%';
progress.textContent = '100%';
setTimeout("document.getElementById('progress_bar').className='';", 2000);
}
// Read in the image file as a binary string.
reader.readAsBinaryString(evt.target.files[0]);
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
Exemplo: como monitorar o progresso de uma leitura. Experimente!
Dica: para realmente ver o indicador de progresso em ação, experimente usar um arquivo grande ou um recurso em disco remoto.
Referências
- Especificação de API de arquivos
- Especificação da interface FileReader
- Especificação de interface FileReader
- Especificação da interface FileError
- Especificação de ProgressEvent