A API de arquivos do HTML5 fornece um modo padrão para interagir com o sistema de arquivos local com menos complexidade . Neste artigo, vamos utilizar JavaScript e HTML5 para ler um arquivo local:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>FileAPI HTML5</title>
<style type="text/css">
#filecontents {
border: double;
overflow-y: scroll;
height: 400px;
}
</style>
</head>
<body>
Por favor selecione arquivo que será lido:
<input type="file" id="txtfiletoread" /><br />
<div>Conteúdo do arquivo:</div>
<div id="filecontents">
</div>
<script>
window.onload = function () {
//Check the support for the File API support
if (window.File && window.FileReader && window.FileList && window.Blob) {
var fileSelected = document.getElementById('txtfiletoread');
fileSelected.addEventListener('change', function (e) {
//Set the extension for the file
var fileExtension = /text.*/;
//Get the file object
var fileTobeRead = fileSelected.files[0];
//Check of the extension match
if (fileTobeRead.type.match(fileExtension)) {
//Initialize the FileReader object to read the 2file
var fileReader = new FileReader();
fileReader.onload = function (e) {
var fileContents = document.getElementById('filecontents');
fileContents.innerText = fileReader.result;
}
fileReader.readAsText(fileTobeRead);
}
else {
alert("Por favor selecione arquivo texto");
}
}, false);
}
else {
alert("Arquivo(s) não suportado(s)");
}
}
</script>
</body>
</html>
O código primeiro verifica se o navegador suporta APIs de arquivo ou não. Se eles são suportados, em seguida, o código lê o elemento de arquivo e assina o evento de alteração do mesmo. A implementação do evento change, como mencionado aqui:
- Defina a extensão para ler somente arquivo de texto .
- Obter o objeto de arquivo que é selecionado pelo elemento do arquivo .
- Se a extensão do arquivo é texto, então o objeto FileReader é inicializado .
- O arquivo é então lida usando o método readAsText ( ) do objeto FileReader .
- O conteúdo do arquivo são exibidos na div de nome fileContents.
Por hoje é só pessoal!
Conclusão: O HTML 5 File API fornece um modo padrão para interagir com o sistema de arquivos local com menos complexidade . Em artigos futuros , veremos alguns casos de uso adicionais da API de arquivos.
Um grande abraço!
