Ir para conteúdo
Felipe Guedes Coutinho

Como ler arquivo TXT com JS Puro?

Recommended Posts

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

image.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

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();

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

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

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Giovanird
      O script abaixo atualiza a página (centro.php) a cada um minuto e dentro desta página terei uma div que não poderá ser atualizada.
      Tentei colocar esta div como pagina com setInterval de 100 minutos porem ao dar o refresh no centro.php  tudo vai junto.  Será que isto é possivel?

      Desde já meu muito obrigado!
      <script> function atualiza(){ var url = 'centro.php'; $.get(url, function(dataReturn) { $('#centro').html(dataReturn); }); } setInterval("atualiza()",60000); </script>  

    • Por luiz monteiro
      Bom dia. Eu estou tentando encontrar uma maneira de evitar que após o usuário selecionar, se selecionar, uma imagem, essa seja substituída apenas por outra selecionada. Porém quando o usuário cancela a seleção, o input file remove o arquivo se já foi selecionado anteriormente.
      Essa é a estrutura que estou usando HTML
      form action="#" method="post" name="formulario" id="formulario" enctype="multipart/form-data"
      input type="file" name="file_name[]" br input type="file" name="file_name[]" br button enviar /button /form
      JS PURO
      Peguei esse script em um post aqui do stackoverflow e adaptei
      script type="text/javascript"
      let formulario = document.querySelector("#formulario"); formulario.addEventListener("change", (e)=>{ e.preventDefault(); var file = e.target.files[0]; if (e.target.files.length === 1 && e.target.files !== undefined && e.target.files !== null && file.type.match('image.*')) { console.log("if okay"); } else { //preciso entender o que devo fazer aqui para verificar se há arquivo no DOM desse target caso, o usuário cancele a seleção, para evitar que se há um arquivo no DOM esse permaneça. console.log(file); //CASO O USUÁRIO CANSELA A SELEÇÃO, RETORNA undefined } }); /script
      O if está correto, porém o que falta é o que fazer no else. Agradeço desde já.
    • Por ILR master
      Fala pessoal, tudo bem?
       
      Tô tentando fazer um pre-loading, mas não consigo de jeito algum.
      Quero mostrar uma animação enquanto a página é carregada e depois de caregada, esconder a animação e mostrar conteúdo.
       
      Aguém pode me ajudar?
       
      Segue código abaixo
       
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
          <title>PÁGINA LOAD</title>

      <style type="text/css">
      .loadclass {
          border: 2px solid #f3f3f3; /* Light grey */
          border-top: 4px solid #ffc401; /* Blue */
          border-radius: 50%;
          width: 50px;
          height: 50px;
          animation: spin 2s linear infinite;
      }
      @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }
      .conteudo {
          display:none;
      }
      </style>
      <script>
          function loading(){
              document.getElementsByClassName('loadclass')[0].style.display="none";
              document.getElementsByClassName('conteudo').style.display="block";
          }
      </script>
      </head>
      <body onLoad="loading()">
      <div class="loadclass"></div>
      <div class="conteudo">SEU CONTEUDO AQUI DENTRO!!!</div>
      </body>
      </html>
    • Por ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.