javascript Como ler arquivo TXT com JS Puro?

Felipe Guedes Coutinho · Agosto 8, 2022

Galera, estou precisando ler 1 arquivo TXT mas não quero usar nenhum INPUT para carregar o arquivo.

Eu tenho uma estrutura de pasta onde os meus arquivos TXT ficaram fisicamente e no meu código HTML + JS quero que ao alterar um SELECT OPTION, através da escolha eu validar se o arquivo com o nome selecionado existe na página e se existir eu ler ele e adicionando em um elemento qualquer, uma DIV como conteúdo ou dentro de uma TEXTAREA.

Vou montar a estrutura de pasta abaixo e colocar imagens de exemplo:

Estrutura de pasta

projeto

index.html

dclgen <-- Aqui dentro tenho vários arquivos do formato TXT

t1.txt

t2.txt

t3.txt

...

t4.txt

Pasta DCLGEN dentro da pasta projeto e a pasta DCLGEN junto com o arquivo HTML

image.png.55584d6ebbd7a033ec25ea7ded828d1a.png

Ao escolher no SELECT o nome T1 quero que o JavaScript veja se o arquivo t1.txt existe e se existir quero LER o conteúdo dele e jogar em um ELEMENTO HTML.

image.png.b84e94141a4a0c4f2b4ab2ae6f2ff357.png

Preciso fazer isso da forma mais "SIMPLES" possível usando HTML e JavaScript.

Alguém pode dar um help? Pesquisei no Google muitas opções e os códigos encontrados não me atenderam.

Não quero ser obrigado a fazer um "UPLOAD" usando um INPUT do TIPO FILE, quero usar algo já dentro da pasta do projeto.

<!DOCTYPE html>
<html>
  <head>
    <title>Read Text File Tutorial</title>
  </head>
  <body>
    <input type="file" onchange="loadFile(this.files[0])">
    <br>
    <pre id="output"></pre>
    <script>
      async function loadFile(file) {
        let text = await file.text();
        document.getElementById('output').textContent = text;
      }
    </script>
  </body>
</html>

Código usando FileReader, mas que também está usando um INPUT como estimúlo, não é o que quero.

document.getElementById('file').onchange = function(){
  var file = this.files[0];
  var reader = new FileReader();
  reader.onload = function(progressEvent){    
    var fileContentArray = this.result.split(/\r\n|\n/);
    for(var line = 0; line < lines.length-1; line++){
      console.log(line + " --> "+ lines[line]);
    }
  };
  reader.readAsText(file);
};

Encontrei esse código também, mas não consegui usar...

Esse é o parâmetro passado na url "https://dicasdejavascript.com.br/exemplo.txt"

function lerURL(URL) {
    var http = new XMLHttpRequest();
    http.open("GET", URL, false);
    http.send();

    console.log(http.responseText);
}

Espero que alguém consiga me ajudar...

Desde já agradeço.

Atenciosamente.

Felipe Coutinho

Omar~ · Agosto 8, 2022

Para você usar a API FileReader primeiro você tem de converter o arquivo para um Blob usando a api Blob. No entanto é possível também ao se criar o objectURL com o arquivo é até mais simples porém trabalho desnecessário.

Como o arquivo está dentro do projeto a melhor e mais prática solução é mesmo usando a API XMLHttpRequest.

var arquivo = 'texto.txt'; // Mude isso conforme o valor do <select>
var xhr = new XMLHttpRequest();

xhr.responseType = 'text';
xhr.open('GET', arquivo, true); // Forneça o caminho e o arquivo de texto para ser lido
xhr.addEventListener('readystatechange', function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log( xhr.responseText );
    }
}, false);
xhr.send();

Prog · Agosto 8, 2022

Se o JS está rodando no seu navegador, provavelmente, não vai conseguir acessar seus arquivos de forma direta (no disco), desta forma, seus arquivos precisam estar acessíveis por uma URL ou seguir um caminho diferente para esta solução. Pode detalhar um pouco mais sobre o problema que você esta tentando resolver? Uma opção pode ser utilizando NodeJS.

Felipe Guedes Coutinho · Agosto 8, 2022

@Omar~

Tudo bem?

Tentei fazer usando o seu código, porém recebi a mensagem de erro:

Access to XMLHttpRequest at 'file:///C:/Users/ROG/Desktop/Projeto/dclgen/T3.txt' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
dclgen/TBDR0003.txt:1          Failed to load resource: net::ERR_FAILED

Sabe me dizer o que estou fanzendo de errado?

Este é o código que estou usando para teste:

index.html

<html>
<head>
<title>Lendo Arquivo Local - Fixo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<script language="JavaScript">
function obterComandoSQL() {
	//Caminho do arquivo:
	//var arquivo = 'texto.txt'; // Mude isso conforme o valor do <select>
	var arquivo = "C:/Projeto/dclgen/"+document.getElementById("tabela").value+".txt";
	
	alert(arquivo);
	
	var xhr = new XMLHttpRequest();
	
	xhr.responseType = 'text';
	xhr.open('GET', arquivo, true); // Forneça o caminho e o arquivo de texto para ser lido
	xhr.addEventListener('readystatechange', function () {
		if (xhr.readyState === 4 && xhr.status === 200) {
			console.log( xhr.responseText );
		}
	}, false);
	xhr.send();
}
</script>

</head>
<body class="w3-container w3-auto">

<label class="w3-text-orange w3-left" for="browser"><b>Escolha uma tabela: </b></label>
<select class="w3-input" id="tabela" name="tabela" onChange="obterComandoSQL()">
	<optgroup label="Tabelas">
		<option value="" disabled selected>Escolha uma tabela</option>
		<option value="T1">T1</option>
		<option value="T2">T2</option>
		<option value="T35">T35</option>
		<option value="T36">T36</option>
		<option value="T37">T37</option>
		<option value="T38">T38</option>
		<option value="T39">T39</option>
		<option value="T82">T82</option>
		<option value="T83">T83</option>
		<option value="T93">T93</option>
	</optgroup>
</select>

Se você conseguir me mostra onde está o meu erro, agradeço.

Felipe Guedes Coutinho · Agosto 8, 2022

Prog

Eu estou tentando montar uma solução "LOCAL" não vou hospedar, então o que eu preciso é o seguinte, estou gerando alguns comandos SQL dentro de arquivos TXT, esses arquivos iram ficar dentro da pasta do projeto mais especifico dentro de "C:\Projeto\dclgen\*.txt"... Isso porque EU vou gerar esses arquivos e colocar dentro dessa pasta, vou ZIPAR esse projeto e mandar para alguns amigos do meu trabalho, como eles não sabem construir comandos SQL eu vou deixar disponível dentro de cada arquivo.

Por isso eu quero que a cada escolha no INPUT SELECT o JavaScript leia o arquivo correspondente a tabela selecionada, quem realmente vai usar não vai ter o arquivo, na verdade não quero nem que saibam que o arquivo .txt exista...

Então a solução que preciso é

Escolha uma tabela no input do tipo SELECT, ao seleciona o nome da tabela execute uma função JavaScript para LER o arquivo e jogar dentro de uma TEXTAREA.

<label class="w3-text-orange w3-left" for="browser"><b>Escolha uma tabela: </b></label>
<select class="w3-input" id="tabela" name="tabela" onChange="obterComandoSQL()">
	<optgroup label="Tabelas">
		<option value="" disabled selected>Escolha uma tabela</option>
		<option value="T1">T1</option>
		...
		<option value="T93">T93</option>
	</optgroup>
</select>

O Omar~ recomendou um código, mas parece que ele está com erro que não sei o que é e nem se a solução realmente de fato vai atender, pelo o que percebi ele espera um parâmetro dotipo GET e eu não gero isso.

Minha função JavaScript adaptada com a solução que o Omar me passou:

<script language="JavaScript">
function obterComandoSQL() {
	//Caminho do arquivo:
	//var arquivo = 'texto.txt'; // Mude isso conforme o valor do <select>
	var arquivo = "C:/Projeto/dclgen/"+document.getElementById("tabela").value+".txt";
	
	alert(arquivo);
	
	var xhr = new XMLHttpRequest();
	
	xhr.responseType = 'text';
	xhr.open('GET', arquivo, true); // Forneça o caminho e o arquivo de texto para ser lido
	xhr.addEventListener('readystatechange', function () {
		if (xhr.readyState === 4 && xhr.status === 200) {
			console.log( xhr.responseText );
		}
	}, false);
	xhr.send();
}
</script>

Se conseguir dar uma ajudinha, agradeço.

Atenciosamente.

Felipe Coutinho

Omar~ · Agosto 8, 2022

11 horas atrás, Felipe Guedes Coutinho disse:

Sabe me dizer o que estou fanzendo de errado?

Não está fazendo nada de errado.

O problema que para XMLHttpRequest ser aceito pelo navegador é necessário um protocolo http.

Francamente nunca usei o javascript sem um protocolo http, acredito eu que nem seja a linguagem mais adequada para esse fim, preferiria usar C++.

11 horas atrás, Felipe Guedes Coutinho disse:

como eles não sabem construir comandos SQL eu vou deixar disponível dentro de cada arquivo.

Talvez uma solução seria você criar um array ou um objeto com as instruções SQL e apenas acessar cada índice para obter a instrução.

Por fim como dito sou leigo enquanto a usar o javascript para essa situação portanto não poderei ajudar mais do que isso.

E a propósito.... Ao invés de zipar e enviar além de ter o trabalho que está tendo já ouviu falar no https://github.com

Assim você e seus amigos poderiam trabalhar ao mesmo tempo no mesmo projeto cada um fazendo o que tem de fazer sem interferir no que o outro faz. Assim sendo você poderia cuidar da parte das instruções SQL e os outros nos demais afins.

tetsuo · Agosto 9, 2022

faça um input:file pra subir o(s) arquivo(s) que pretendes ler

Felipe Guedes Coutinho · Agosto 9, 2022

tetsuo

Opaaa, obrigado pela dica, mas isso é exatamenet o que eu não quero e o que coloquei nos textos... os arquivos precisam ser lidos sem a necessidade de serem INPUTADOS de qualquer forma... eles devem ser lidos apenas ao acionar o SELECT com a função ONCHANGE sem INPUT de Arquivos.

javascript Como ler arquivo TXT com JS Puro?

Recommended Posts

Felipe Guedes Coutinho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Prog 183

Compartilhar este post

Link para o post

Compartilhar em outros sites

Felipe Guedes Coutinho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Felipe Guedes Coutinho 0

Prog

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

tetsuo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Felipe Guedes Coutinho 0

tetsuo

Compartilhar este post

Link para o post

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

PHP+Codeigniter - Ajuda en NFePhp para Sistema

PHP+Codeigniter - Teclas para Salvar (atalho)

Javascript - Passar Parâmetros para uma Função.

Conteúdo Similar

Fóruns

Tempo Real

Informação importante