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 belann
      Olá!
       
      Estou usando o editor quill em uma página html, sem fazer a instalação com npm, mas usando as api´s via internet com http, no entanto não consigo fazer a tecla enter funcionar para mudança de linha, tentei essa configuração abaixo, mas não funcionou.
       
      modules: {       syntax: true,       toolbar: '#toolbar-container',       keyboard: {         bindings: {           enter: {             key: 13,             handler: function(range, context) {                       quill.formatLine(range.index, range.length, { 'align': '' });             }           }  
       
    • By violin101
      Caros amigos, saudações.
       
      Gostaria de poder tirar uma dúvida com os amigos.
       
      Como faço uma função para Comparar a Data Digitada pelo o Usuário com a Data Atual ?

      Data Digitada:  01/09/2024
       
      Exemplo:
      25/09/2024 é menor que DATA Atual  ====> mensagem: informe uma data válida.
      25/09/2024 é igual DATA Atual ===> o sistema libera os INPUT's.
       
      Como faço uma comparação com a Data Atual, para não Deixar Gravar Data retroativa a data Atual.
       
      Grato,
       
      Cesar
    • By Rafael Castelhano
      Olá, quero preencher um dict dinamicamente onde a chave é uma string multidimencional no dict, ex:
      var dict = {} var path = 'a.b.c' dict[path] = 55 // isso faz dict ficar desta forma {'a.b.c': 55} // mais quero que fique assim {a: {b: {c: 55}}} Como consigo alterar desta forma? 
    • By violin101
      Caros amigos, saudações.
       
      Estou com um problema de cálculo que não estou conseguindo resolver.
       
      Tenho uma rotina em Javascript que faz o seguinte cálculo qtde x vrUnit = total.
       
      qtde   x  vrUnit    =    total
      1,23   x  1,00       =    1,23    << até aqui tudo bem.
       
      o problema seria fazer o arredondamento para cima para impedir de fazer este cálculo:
      0,01 x 0,01 = 0,0001
       
      para digitar o valor estou utilizando esta função:
       
      /*Esta função quando o usuário digitar o valor aparece * 1,23 */ function formataDigitacao(i) { //Adiciona os dados para a másrcara var decimais = 2; var separador_milhar = '.'; var separador_decimal = ','; var decimais_ele = Math.pow(10, decimais); var thousand_separator = '$1'+separador_milhar; var v = i.value.replace(/\D/g,''); v = (v/decimais_ele).toFixed(decimais) + ''; var splits = v.split("."); var p_parte = splits[0].toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, thousand_separator); (typeof splits[1] === "undefined") ? i.value = p_parte : i.value = p_parte+separador_decimal+splits[1]; } /*Esta função faz a multiplicação entre Valor Unitário X Quantidade *faz a multiplicação correta */ function calcProd(){ //Obter valor digitado do produto var prod_qtde = document.getElementById("qtde").value; //Remover ponto e trocar a virgula por ponto while (prod_qtde.indexOf(".") >= 0) { prod_qtde = prod_qtde.replace(".", ""); } prod_qtde = prod_qtde.replace(",","."); //Obter valor digitado do produto var valor_unit = document.getElementById("vlrunit").value; //Remover ponto e trocar a virgula por ponto while (valor_unit.indexOf(".") >= 0) { valor_unit = valor_unit.replace(".", ""); } valor_unit = valor_unit.replace(",","."); //Calcula o Valor do Desconto if (valor_unit > 0 && prod_qtde > 0) { calc_total_produto = (parseFloat(valor_unit) * parseFloat(prod_qtde)); var numero = calc_total_produto.toFixed(2).split('.'); //<<== aqui faço o arredondamento das casas decimais de 1,234 p/ 1,23 numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.'); document.getElementById("vlrtotal").value = numero.join(','); } else { if (valor_unit > 0) { document.getElementById("vlrtotal").value = document.getElementById("vlrunit").value; } else { document.getElementById("vlrtotal").value = "0,00"; } } } Grato,
       
      Cesar
    • By violin101
      Caros amigos, saudações.
       
      Estou com uma dúvida e não estou conseguindo resolver.
       
      Tenho um SELECT onde eu pego o ID e NOME_CAMPO, até aqui tudo bem.
       
      Para evitar erros de saída de produtos por estoque, preciso passar o ID do Centro de Custo, para gerar a Tabela de produtos em estou por cada centro de Custo.

      Exemplo:
      Centro de Custo 1 - tem:
      produto A | produto B | produto C

      Centro de Custo 2 - tem:
      produto D | produto E

      Como consigo pegar via JAVASCRIPT o código do Centro de Custo selecionado e passar para a Controller, para chamar a MODAL ?

      meu código está assim:
      VIEW
       
      <div class="col-md-6"> <label for="deptsOrigem">Dpto Origem:</label> <div class="input-group mb-3"> <input type="hidden" name="idCentrocusto" id="idCentrocusto"> <input type="text" class="form-control" id="nameCentrocusto" name="nameCentrocusto" style="font-size:15px; font-weight:bold;" placeholder="Pesquisar por Centro de Custo" disabled> <span class="input-group-btn"> <button class="btn btn-primary" type="button" id="btnOrgn" name="btnOrgn" data-toggle="modal" data-target="#modal_deptsOrigem" > <span class="fa fa-search"></span> Buscar </button> </span> </div> </div> <div class="modal fade" id="modal_deptsOrigem"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header" style="font-size:18px; color:#ffffff; background:#307192;"> <h4 class="modal-title"><strong>Lista do(s) Centro de Custo(s)</strong></h4> </div> <div class="modal-body"> <table id="deptsLista" class="table table-bordered table-hover"> <thead> <tr> <th style="text-align:center;">Código</th> <th style="text-align:center;">Centro de Custo(s)</th> <th style="text-align:center;">Ação</th> </tr> </thead> <tbody id="itensDeptos"> <!---Monta Tabela VIA Ajax---> </tbody> </table> </div> <div class="modal-footer justify-content-center" style="background:#BBAAAA;"> <button type="button" class="btn btn-danger pull-center" data-dismiss="modal">Voltar</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div>  
      o JAVASCRIPT está assim:
       
      //Função para Chamar o Centro de Custo que o usuário deseja. listaDeptos(); var table = $('#deptsLista').dataTable({ "searching": true, "ordering": true, "info": true, "autoWidth": false, "pageLength": 5, "lengthMenu": [ 5, 10, 25, 50 ], "responsive": true, }); // list all employee in datatable function listaDeptos(){ $.ajax({ type : 'ajax', url : '<?=base_url()?>estoque/consumo/deptsList/', async : false, dataType : 'json', success : function(data){ var html = ''; var i; for(i=0; i<data.length; i++){ var datadpts = data[i].idDepartamento+"*"+data[i].departamento; html += '<tr>'+ '<td width="15%" style="text-align:center; font-size:16px;">'+data[i].idDepartamento+'</td>'+ '<td width="50%" style="text-align:left; font-size:16px;">'+data[i].departamento+'</td>'+ '<td width="10%" style="text-align:center;">'+ '<button type="button" class="btn btn-success btn_orgns" style="margin-right: 1%; padding: 2px 5px;" title="Selecionar Departamento" value="'+datadpts+'"><span class="fa fa-check"></span></button>'+ '</td>'+ '</tr>'; } //Fim - For $('#itensDeptos').html(html); } //Fim - success }); //Fim - ajax } //Fim - function /*---Função para Capturar o Departamento selecionado---*/ $(document).on("click",".btn_orgns",function(){ dpts = $(this).val(); infodpts = dpts.split("*"); $("#idCentrocusto").val(infodpts[0]); $("#nameCentrocusto").val(infodpts[1]); $("#modal_deptsOrigem").modal("hide"); //Função para Atualizar o Status do Botão statusPesqProd(); }); //Função para Gerar a Lista de Produtos por Centro de Custo via AJAX. listaProduts(); var table = $('#prdsLista').dataTable({ "searching": true, "ordering": true, "info": true, "autoWidth": false, "pageLength": 5, "lengthMenu": [ 5, 10, 25, 50 ], "responsive": true, }); // list all employee in datatable function listaProduts(){ $.ajax({ type : 'ajax', url : '<?=base_url()?>estoque/consumo/produtsList/', //< como passo aqui o ID do Centro de Custo Selecionado para Gerar a Lista de Produtos async : false, dataType : 'json', success : function(data){ var html = ''; var i; for(i=0; i<data.length; i++){ var prds = data[i].idProdutos+"*"+data[i].cod_interno+"*"+data[i].descricao+"*"+data[i].prd_unid+"*"+data[i].estoque_atual; html += '<tr>'+ '<td width="15%" style="text-align:center; font-size:16px;">'+data[i].cod_interno+'</td>'+ '<td width="50%" style="text-align:left; font-size:16px;">'+data[i].descricao+'</td>'+ '<td width="15%" style="text-align:center; font-size:16px;">'+data[i].prd_unid+'</td>'+ '<td width="15%" style="text-align:center; font-size:16px;">'+data[i].estoque_atual+'</td>'+ '<td width="12%" style="text-align:center;">'+ '<button type="button" class="btn btn-success btn-prod" style="margin-right: 1%; padding: 2px 5px;" title="Selecionar Produto" value="'+prds+'"><span class="fa fa-check"></span></button>'+ '</td>'+ '</tr>'; } //Fim - For $('#itensProds').html(html); } //Fim - success }); //Fim - ajax } //Fim - function  
      a CONTROLLER está assim:
      //Função para Criar Lista - Produtos Data Tables com AJAX function produtsList(){ $data = $this->consumo_model->prodsList(); echo json_encode($data); }  
       
       
      Grato,
       
      Cesar
×

Important Information

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