Como ler arquivos locais em javascript

JavaScript é uma linguagem de programação da web de alto nível que oferece páginas da web a capacidade de pensar e agir. JavaScript oferece aos desenvolvedores a interatividade com arquivos presentes no sistema local do desenvolvedor. A interatividade com os arquivos pode ser de diferentes tipos, por exemplo, enviando um arquivo para um servidor ou carregando -o com restrições.

Existem várias maneiras de abrir e ler arquivos locais em JavaScript, mais comum sendo usando o sistema de arquivo/Promissa da API de Sistema de Arquivo Infilitado -"FS" API, ou usando o atributo de arquivo de seleção HTML do

Tag, ou mesmo usando algum pacote externo e depois tentando seu método.

Então, neste post, mostraremos como ler arquivos locais em javascript usando o FS API e usando

O atributo de arquivo de seleção HTML.

HTML5 API FILEREADER

HTML5 introduziu um mecanismo consistente para lidar com arquivos locais, introduzindo o API do leitor de arquivos especificação. O API do leitor de arquivos Pode ser usado para fornecer uma visualização de Miniatria de Fotos quando são transmitidas a um servidor, além de permitir que um aplicativo da Web armazene uma referência de arquivo, mesmo que o usuário não esteja conectado à Internet. Usando os manipuladores de eventos do JavaScript e a API do leitor de arquivos, podemos ler assíncronos um arquivo.

O leitor de arquivos API nos oferece quatro métodos internos que podemos usar para ler arquivos de forma assíncrona. O primeiro método interno é o FileReader.readasArrayBuffer () que lê um conteúdo de arquivo local, mas retorna um ArrayBuffer que possui o conteúdo do arquivo. Então vem o FileReader.readasdataurl () que retorna um URL dos dados de um arquivo local.

O FileReader.ReadaSbinaryString () Retorna o conteúdo do arquivo local em um formato de string e o método interno mais usado de filereader é o FileReader.dolatext () que retorna o conteúdo do arquivo local em um formato de sequência de texto ou podemos dizer em uma forma legível por humanos.

Agora que sabemos o que é o FileReader API, vamos definir o ambiente HTML para um usuário selecionar um arquivo que ele/ela deseja que o navegador leia.

HTML Selecione Arquivo

HTML é uma linguagem de marcação de hipertexto que é usada para dar estrutura às nossas páginas da web. Usaremos o HTML para fazer o usuário selecionar um arquivo e depois usaremos o JavaScript para ler o conteúdo do arquivo. O código HTML é fornecido abaixo:

No código acima, inicializamos um entrada tag com o tipo de arquivo e dado o atributo eu ia que será usado para fazer referência a este elemento em nosso arquivo JavaScript. Em seguida, inicializamos um p tag na qual nosso conteúdo do arquivo será publicado assim que o usuário selecionar um arquivo. No final, usamos o roteiro com o atributo SRC no qual referenciamos um arquivo código.JS que conterá nosso código JavaScript.

Javascript Leia Funcionalidade de Arquivo

Terminamos o HTML, então agora vamos para o JavaScript para alcançar nosso propósito de ler um arquivo em JavaScript. Para esse fim, usaremos o método interno da API do leitor de arquivos dolatext (). O código JavaScript é fornecido abaixo:

var myfile = documento.getElementById ("myfile");
var fileOutput = documento.getElementById ("FileOutput");
meu arquivo.addEventListener ('alteração', function ()
var fileReader = new FileReader ();
FileReader.OnLoad = function ()
FileOutput.TextContent = FileReader.resultado;

FileReader.Destatext (isso.arquivos [0]);
)

No código acima, primeiro, obtemos a referência do arquivo de entrada e o p Tag que definimos no HTML usando o atributo de ID. Em seguida, adicionamos um ouvinte do evento de alteração para que sempre que um usuário selecione um arquivo ou escolhe um arquivo, a função presente neste manipulador de eventos começará a executar.

Dentro da função do manipulador de eventos primeiro, inicializamos o FileReader () Objeto com a nova palavra -chave. Então, na conclusão do FileReader função, estamos apenas postando o resultado do arquivo lido na variável FileOutput, que é realmente o p marcação.

No final, estamos lendo o arquivo com a ajuda do método integrado do FileReader que é dolatext () e passar um argumento para mencionar a leitura do arquivo que está no primeiro índice. Estamos fazendo isso para que o usuário não selecione vários arquivos e, mesmo que ele selecione vários arquivos, o FileReader acabará de ler o primeiro arquivo entre eles.

Vamos agora selecionar um arquivo. Para esse fim, eu criei um texto documentar e escrever duas linhas nesse arquivo. A saída do conteúdo do arquivo é fornecida abaixo:

Vamos agora selecionar este arquivo no HTML e ver se podemos ver o conteúdo do arquivo ou não:

Escolhemos com sucesso um arquivo e lemos seu conteúdo e depois imprimimos esse conteúdo.

Conclusão

O HTML5 fornece uma API do FileReader através da qual podemos ler o conteúdo do arquivo. A API FileReader nos dá quatro métodos construídos que podemos usar para ler um arquivo da maneira que queremos. O readaSarrayBuffer () lê um arquivo e retorna um ArrayBuffer do conteúdo do arquivo, readasdataurl () lê o arquivo e retorna um URL que possui conteúdo do arquivo de leitura, readasbinaryString () Leia um arquivo e retorna dados binários brutos do arquivo de leitura e o último é o dolatext () que lê um arquivo e retorna o conteúdo do arquivo de leitura como uma sequência de texto que está em forma legível por humanos.

Nesta postagem, discutimos como ler um arquivo local em JavaScript, implementando primeiro como selecionar um arquivo local usando HTML e, quando selecionamos esse arquivo, lemos o conteúdo do arquivo usando JavaScript.