Como trabalhar com arquivos em JavaScript usando a API FileReader | Explicado com exemplos
Ler um arquivo e ler seus dados pode ser feito de várias maneiras, mas às vezes é melhor usar o objeto \ api que é suportado por quase todos os navegadores da web. É por isso que a API do FileReader é um dos objetos mais usados de JavaScript de baunilha para ler o conteúdo de um arquivo.
Objeto do leitor de arquivos
Para criar um novo objeto de leitor de arquivos, você precisa primeiro ligar para o FileReader () construtor usando o "novo" palavra -chave. Depois disso, você pode começar a usar as várias funções deste objeto. Para saber mais sobre este construtor, você pode visitar os documentos oficiais do MDN clicando aqui.
Métodos do leitor de arquivos
O objeto do leitor de arquivos vem com muitos métodos diferentes que nos ajudam a analisar os dados do arquivo que estamos lendo. Alguns dos métodos são executados automaticamente pelos navegadores e são chamados de métodos de manipulador de eventos, por exemplo, o "carregando()" O método é invocado automaticamente quando o leitor de arquivo terminar de ler o conteúdo do arquivo.
Para acessar os métodos do objeto do leitor de arquivos, você usa um DOT-Operator “ .”. Alguns dos métodos e variáveis que podem ser acessados usando o objeto do leitor de arquivos são ::
- objeto. Resultado: usado para obter o conteúdo do arquivo que foi lido
- objeto.Destatext: lê o conteúdo do arquivo e os analisa como um texto
- objeto.Aborte: aborta a operação de leitura atual
E muito mais que pode ser lido na página da web da documentação oficial.
Exemplo do leitor de arquivos
Para demonstrar o uso da API do leitor de arquivos, precisaremos de uma página da web html com um campo de entrada do tipo = "arquivo", Podemos criar isso usando a seguinte linha no arquivo HTML:
Isso nos dará a seguinte página da web:
Observação: Não usamos nenhum ID ou atributo de classe no campo de entrada, pois estaremos nos referindo ao nosso campo de entrada usando o seletor de consulta.
Para o código JavaScript, a primeira coisa que faremos é selecionar o campo de entrada usando o seletor de consulta:
const input = document.QuerySelector ('input [type = "file"]');Em seguida, vamos adicionar um ouvinte de evento de "mudar" em nossa variável entrada, Isso chamará uma função para carregar o conteúdo do arquivo usando a seguinte linha:
entrada.addEventListener ("alteração", função (e), false);
Este ouvinte de evento de função será executado toda vez que o tag de entrada Carrega um arquivo, podemos acessar o arquivo usando o "entrada.arquivo" variedade. Para exibir os detalhes do arquivo carregado, podemos usar a seguinte linha:
console.log (entrada.arquivos [0])Recebemos a seguinte saída em nosso console:
Dentro da função, vamos criar nosso objeto de leitor de arquivos usando a linha:
Const Reader = new FileReader ();O arquivo que eu quero ler é um arquivo de texto, então aqui vou usar o método Destatext do objeto do leitor de arquivos para analisar o conteúdo dos arquivos como dados textuais usando as seguintes linhas:
leitor.Destatext (entrada.arquivos [0]);Agora, podemos acessar o conteúdo do arquivo que lemos e analisamos usando o leitor.resultado. O carregando() O método é chamado automaticamente quando o objeto do leitor de arquivos terminar de ler o arquivo, para que possamos exibir o conteúdo do arquivo depois que terminar de ler usando os seguintes comandos:
leitor.OnLoad = function ()console.log (leitor.resultado);
;
O trecho de código completo é:
const input = document.QuerySelector ('input [type = "file"]');entrada.addEventListener (
"mudar",
função (e)
console.log (entrada.arquivos [0]);
Const Reader = new FileReader ();
leitor.Destatext (entrada.arquivos [0]);
leitor.OnLoad = function ()
console.log (leitor.resultado);
;
,
falso
);
Execute o arquivo e selecione um arquivo de texto em sua máquina local como esta:
Você observará o seguinte resultado em seu console:
E lá vai você, você leu o conteúdo do arquivo e os imprimiu no console.
Trabalhando com uma imagem
Para ler uma imagem e exibi -la no console, você precisa primeiro ler o arquivo com o Readasdataurl Usando a seguinte linha:
leitor.ReadaDataurl (entrada.arquivos [0]);E para exibir a imagem em sua página da web, você precisa criar uma nova variável de imagem dentro do carregando() função usando as seguintes linhas:
leitor.OnLoad = function ()const iMg = new Image ();
;
,
E então dentro disso carregando função, você vai definir a fonte da variável de imagem que criamos igual ao resultado do objeto do leitor de arquivos:
img.src = leitor.resultado;E por último, vamos anexar esta variável de imagem ao documento usando a seguinte linha:
documento.corpo.ApndendChild (IMG);O trecho de código completo é:
const input = document.QuerySelector ('input [type = "file"]');entrada.addEventListener (
"mudar",
função (e)
console.log (entrada.arquivos [0]);
const leitor = newFileReader ();
leitor.ReadaDataurl (entrada.arquivos [0]);
leitor.OnLoad = function ()
constimg = new Image ();
img.src = leitor.resultado;
documento.corpo.ApndendChild (IMG);
;
,
falso
);
Ao executar o arquivo, você terá a seguinte saída:
E aí está, agora você sabe como trabalhar com a API do leitor de arquivos para ler arquivos em sua máquina local
Conclusão
A API do leitor de arquivos é uma API embutida com Javascript de baunilha e é suportada por quase todos os navegadores da web. Esta API do leitor de arquivos nos retorna um objeto de leitor de arquivos que podemos usar para ler o conteúdo do arquivo selecionando o método de análise. Nesta postagem, aprendemos sobre a API do leitor de arquivos, o objeto do leitor de arquivos e como usar o objeto do leitor de arquivos para ler arquivos de texto, bem como arquivos de imagem. Até exibimos a imagem no navegador da web, anexando -a ao documento.