Jump to content
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

Share this post


Link to post
Share on other 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();

 

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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

 

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By 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?
    • By 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>  
    • By Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • By belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
    • By joeythai
      Boa tarde pessoal,
       
      Eu criei um formulário em que tenho 3 interações: evento click, change e uma chamada ajax. No evento on change ("select#removal_table_from" )eu faço uma chamada ajax onde eu passo como parametro o id do item selecionado e construo uma tabela dinamica com o próprio javascript, após isto, tenho um input em que o usuario coloca um valor de percentual para que eu possa preencher em 3 colunas da tabela que foi criada dinamicamente: moto_atualizado, carro_atualizado e caminhao_atualizado, até aí tudo bem, o codigo está fazendo isso, porém, como a tabela é criada dinamicamente eu preciso de alguma forma enviar o arrayData para meu backend mas quando faço o calculo dentro do loop apos resposta do meu ajax, os valores desses 3 campos chegam como null, não sei se é possível fazer o que pretendo ou se é ainda não sei como faz
       
      <code>
           $(document).ready(function (event) {   let arrayData = []; let percentage; let removal_vehicle; let removal_motorcycle; let removal_tuck; let apply_removal = $('#apply_removal');   // apply_removal.on('click', function () { // percentage = $('#percentage').val();   // $('.table-body tr').each(function () {   // let veiculo = $(this).find('.veiculo').text(); // let moto = $(this).find('.moto').text(); // let caminhao = $(this).find('.caminhao').text();   // let removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; // let removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; // let removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   // arrayData.push({ // removal_vehicle, // removal_motorcycle, // removal_tuck // })   // $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); // $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); // $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2)); // }); // });   apply_removal.on('click', function () { percentage = $('#percentage').val();   $('.table-body tr').each(function () {   let veiculo = $(this).find('.veiculo').text(); let moto = $(this).find('.moto').text(); let caminhao = $(this).find('.caminhao').text();   removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   arrayData.push({ removal_vehicle, removal_motorcycle, removal_tuck })   $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2));     console.log('Removal Vehicle:', removal_vehicle); console.log('Removal Motorcycle:', removal_motorcycle); console.log('Removal Truck:', removal_tuck); }); });   $('select#removal_table_from').on('change', function (e) { let table_id = $(this).val(); let action = route('removal.removal-values.show', table_id);   $.ajax({ type: "GET", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },   success: function (data) { $('.table-body').empty();   for (let i = 0; i < data.length; i++) { let carro = parseFloat(data[i].CARRO); let moto = parseFloat(data[i].MOTO); let caminhao = parseFloat(data[i].CAMINHAO); let distancia = data[i].DISTANCIA; let origem = data[i].ORIGEM; let destino = data[i].DESTINO; let localidadeOrigem = data[i].LocalidadeOrigem_ID; let localidadeDestino = data[i].LocalidadeDestino_ID;   let newRow = '<tr class="removal-row">' + '<td class="align-middle">' + '<div class="row">' + '<div class="col-1">' + '<span class="font-weight-bold">Origem</span><br>' + '<span class="origem">' + origem + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Destino</span><br>' + '<span class="destino">' + destino + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">KM</span><br>' + '<span class="km">' + distancia + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Veículo</span><br>' + '<span class="veiculo">' + carro + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Veículo Atualizado</span><br>' + '<input type="text" class="veiculo_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Moto</span><br>' + '<span class="moto">' + moto + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Moto Atualizado</span><br>' + '<input type="text" class="moto_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Caminhão</span><br>' + '<span class="caminhao">' + caminhao + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Caminhão Atualizado</span><br>' + '<input type="text" class="caminhao_atualizado">' + '</div>' + '</div>' + '</div>' + '</td>' + '</tr>';   $('.table-body').append(newRow); //let row = $('.removal-row:last');   // Calcula o valor atualizado e define nos campos diretamente // let veiculo_atualizado = carro + (carro * percentage) / 100; // let moto_atualizado = moto + (moto * percentage) / 100; // let caminhao_atualizado = caminhao + (caminhao * percentage) / 100; // console.log('PORCENTS: ', percentage); //console.log('Veiculo Atualizado:', veiculo_atualizado, 'Moto Atualizado:', moto_atualizado, 'Caminhao Atualizado:', caminhao_atualizado);   // Define os valores diretamente nos campos da nova linha // row.find('.veiculo_atualizado').val(veiculo_atualizado.toFixed(2)); // row.find('.moto_atualizado').val(moto_atualizado.toFixed(2)); // row.find('.caminhao_atualizado').val(caminhao_atualizado.toFixed(2));   arrayData.push({ carro, moto, caminhao, distancia, origem, destino, localidadeOrigem, localidadeDestino, removal_vehicle, removal_motorcycle, removal_tuck }); }   $('#copy_data_table').val(JSON.stringify(arrayData)); }   }); });   //javascript para o formulario de cadastro // $(document).ready(function (event) { $('#uf').change(function () { let code_city = $(this).val(); let deposit = localStorage.getItem('selected_deposit_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city').empty(); $('#deposit').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '<option>'); }   if (data.deposits.length > 0) { for (let i = 0; i < data.deposits.length; i++) { $('#deposit').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '<option>'); } } else { // $('#deposit').prop('disabled', true); // $('#city').prop('disabled', false); }   $('#city').trigger('change'); } });   });   $('#deposit').on('change', function () { depositId = $(this).val(); localStorage.setItem('selected_deposit_id', depositId); });   $('#uf_destiny').change(function () { let code_city = $(this).val(); let depositDestiny = localStorage.getItem('selected_deposit_destiny_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city_destiny').empty(); $('#deposit_destiny').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city_destiny').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '</option>'); }   if (data.deposits.length > 0) { // $('#deposit_destiny').prop('disabled', false); //$('#city_destiny').empty(); // $('#city_destiny').prop('disabled', true); for (let i = 0; i < data.deposits.length; i++) { $('#deposit_destiny').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '</option>'); } } else { // $('#deposit_destiny').prop('disabled', true); // $('#city_destiny').prop('disabled', false); }   $('#city_destiny').trigger('change'); } }); });   $('#deposit_destiny').on('change', function () { let depositDestinyId = $(this).val(); localStorage.setItem('selected_deposit_destiny_id', depositDestinyId); });   }); </code>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.