Olá a todos os geeks… Grande parte dos sistemas financeiros hoje usam arquivos para a transferência de dados, geralmente é usada a linguagem XML, que é parecida com HTML e usa até tags para dividir o conteúdo. Outros preferem usar arquivos de texto com extensão .txt. que é um pouco mais leve, dependendo é claro da quantidade de dados, e também tem uso mais simples. Nestes arquivo a divisão deve ser feita por caracteres determinados pelo programador, como por exemplo o pipeline “|”. Neste artigo vamos desenvolver uma pequena página WEB, que lê arquivos .txt, e lista os itens. Siga os passos:
1 – Crie uma pasta com nome de sua preferência para salvar os arquivos, crie dentro dela, um arquivo de texto chamado dados.txt, e um arquivo html chamado index.html; 2 – Abra o arquivo dados.txt e digite o seguinte texto nele:
[item]|1|João|joao@clubedosgeeks.com|00000000 [item]|2|Pedro|maria@clubedosgeeks.com|11111111 [item]|3|Maria|maria@clubedosgeeks.com|22222222
Aqui usamos dois tipos de divisores: [item] e |, que servirão para determinar os limites de cada dado e facilitar o tratamento e listagem. Depois salve o arquivo; 3 – Abra o arquivo index.html com o editor de sua preferência e crie nele o seguinte formulário:
| Escolha um arquivo de texto para carregar: |
O formulário deve conter um input file e um botão que chama o método JavaScript loadFileAsText(), na propriedade onclick, que usaremos para fazer a leitura do arquivo; 4 – Agora crie este abaixo a tabela para listagem, conforme o código abaixo:
| Id | Nome | Nascimento |
5 – Agora, ainda no arquivo html abra uma tag script type=”text/javascript”, onde criaremos dois métodos o loadFileAsText(), e o listar(texto). Vamos primeiro ao loadFileAsText(), que irá acessar o arquivo .txt e nos trazer seu conteúdo, veja;
function loadFileAsText(){
var fileToLoad = document.getElementById("fileToLoad").files[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var textFromFileLoaded = fileLoadedEvent.target.result;
var texto = textFromFileLoaded;
listar(texto);
};
fileReader.readAsText(fileToLoad, "UTF-8");
}
5 – Depois, abaixo coloque o código do método listar():
function listar(texto){
var quantidade = document.getElementById("lista").rows.length;
if (quantidade>1){
for(var cont=1;cont<=quantidade;cont++){
document.getElementById("lista").deleteRow(cont);
}
}
var itens = texto.split('[item]');
for(var i=1;i
Pronto, agora teste e veja se deu tudo certo, caso tenha acontecido algum erro você pode baixar os arquivos aqui, como também pode ver a demonstração aqui. Qualquer dúvida é só deixar ai nos comentários ou entrar em contato conosco. Curta a nossa página no Facebook:
Como posso fazer uma busca para por exemplo ordenar os ID’s?
Ivomar, desculpa pela demora. Substitui a função listar(), por essa:
function listar(texto){ var quantidade = document.getElementById("lista").rows.length; if (quantidade>1){ for(var cont=1;cont<=quantidade;cont++){ document.getElementById("lista").deleteRow(cont); } } var itens = texto.split('[item]'); var sub=''; for(var i=0;i0){ for(var cont=1;cont<i; cont++){ var idinicial=itens[cont].split("|") var idfinal=itens[i].split("|") if(idfinal[1]<idinicial[1]){ sub=itens[cont]; itens[cont]=itens[i]; itens[i]=sub; } } } } for(var a=1;a<itens.length;a++){ var valores = itens[a].split("|"); document.getElementById("lista").innerHTML +=''+valores[1]+' '+valores[2]+' '+valores[3]+' '+valores[4]+' E como eu faria deixar um arquivo de texto pré definido para leitura?
Pois pretendo tirar o input file, e deixar o arquivo de texto pré definido.
boa pergunta
Cara faz muito tempo que mexi com isso, mas é melhor usar ajax!
Olá,
Vi sua pergunta nesse post que e muito antigo, e gostaria de saber se conseguiu fazer com que a função pre defina o arquivo de texto sem usar o input file. Se sim, poderia me passar o codigo?
Aqui não funcionou eu não estou usado um servidor.
Qual foi o problema?
boa noite, funcionou muito perfeitamente, mas, será que poderia me ajudar em uma coisa?
este mesmo script, como faria para gerar um novo ID dentro do txt existente através de um formulário?
e no caso, carregar automaticamente a modificação depois, como o colega Maycon Paiva perguntou.
isso seria de grande ajuda para utilizar no project Maelstrom
Olá Roberto, a melhor solução é usar ajax: http://clubedosgeeks.com.br/programacao/javascript/fazendo-ajax-com-jquery
Sei que o post e antigo mas gostaria de saber se alguém conseguiu fazer com que a função pre defina o arquivo de texto sem usar o input file. Jayr Alencar, poderia me fornecer um codigo, pois sou meio leigo com isso conheço muito pouco mas preciso da função. Grato desde ja!
Excelente. Não tinha visto a alteração e já funcionou perfeitamente.
obrigado , mil vezes obrigado, pelo bom e útil exemplo do java com bco.dados arq.txt, voces explicam , liberam o programa sem complicar como alguns idiotas fazem, não gostam de explicar ou ensinar a quem quer aprender e tampouco liberam os fontes. thank’you , merci beaucoup, gracias
obrigado , mil vezes obrigado, pelo bom e útil exemplo do java com bco.dados arq.txt, voces explicam , liberam o programa sem complicar como alguns idiotas fazem, não gostam de explicar ou ensinar a quem quer aprender e tampouco liberam os fontes. thank’you , merci beaucoup, gracias
Boa tarde , funcionou o código porem se alguma palavra tiver acentuação n funciona como por exemplo “João” fica = “Jo�o” tem como me ajudar?
Boa noite, tudo bem?
Você saberia qual script para preencher um form web pegando os dados de um TXT? Sem enviá-lo.
Muito obrigada pela ajuda.
Existe uma forma de construir essa mesma tabela usando o arquivo txt mas sem usar o javascript?
Vai rodar em um navegador que não roda javascript.
Navegador que não roda JavaScript?
Você quer fazer o exemplo do lado do servidor?
Isso, não roda javascript.
Vai rodar do lado do usuário. É um navegador embarcado em uma IHM da siemens que acessa os arquivos a partir de um pendrive.
Existe uma forma de acessar o arquivo txt sem ter que escolher, deixando um arquivo já pré definido no código?
Para quando executar a aplicação já abrir de uma vez?
Cara, acho que você vai ter que usar outra linguagem. Tem que ver qual esse dispositivo suporta. E existe sim uma forma de abrir um pré-definido, só informar o caminho.
Jayr,
Tenho aqui outra IHM com um navegador que suporta o JavaScript. Sinceramente confesso que conheço pouco a linguagem JavaScript, sou desenvolvedor CLP e é pouco usual na minha área.
Por gentileza, poderia me mostrar como ficaria o código para que eu acesse o txt pré definidamente?
O que devo fazer para informar o caminho do arquivo?
Pode ser informado no JavaScript ou tem que fazer um input diferente no html, na intenção de eliminar o botão “ESCOLHER ARQUIVO”?
Direto no JavaScript
Poderia me passar uma dica de como posso fazer isso.
Estou tentando inserir o caminho do arquivo na primeira parte do script, onde é feito o fileToLoad porém sem sucesso.
Jayr,
Boa Tarde!
Na sua rotina (função) abaixo usa [item] para a busca do próximo registro e | para cada informação do regisro
var itens = texto.split(‘[item]’);
for(var i=1;i<itens.length;i++){
var valores = itens[i].split("|");
E se eu desejasse também um terceiro simbolo para montar a tabela, além do [item] e |, por exemplo um @
Sem mais