2

Estou criando uma aplicação WEB e preciso ler um arquivo txt que será fornecido pelo usuário. O código que estou utilizando para realizar a leitura não está dando certo e não consigo encontrar em outros lugares um jeito de fazer a leitura.

// Código dentro do controller
$scope.imprimir = function () {
  lerArquivoTxt.carregarArquivo();
}

// Código dentro do service
function _carregarArquivoTxt() {
  var arquivoSelecionado = document.getElementById('arquivoPastas');
  var divSaida = document.getElementById('textoLido');
  var fileExtension = /text.*/;
  var arquivoLeitura = arquivoSelecionado.files[0];
  var fileReader = new FileReader();
  fileReader.readAsText(arquivoLeitura);
  divSaida.innerText = 'resultado: ' + fileReader.result;
}
<div class="col-sm-6 form-group" id="arquivo">
<div class="lbltitulo" for="Numero">Selecione o arquivo base para criar as pastas do projeto:</div>
<div class="tbpdd16">
  <input  type="file" 
          id="arquivoPastas"
          class="hideBtn btn btn-warning">
</div>

<div class="">
  <input  type="text" 
          id="txtfiletoread" 
          class="form-control"
          placeholder="Pasta / sub pasta"
          ng-model="pasta.pasta">
</div>
<div id="textoLido"></div>

A idéia é que o usuário selecione um arquivo por meio do input file, o controller chama a função _carregarArquivoTxt() do service e esta função ler e retornar todo o arquivo lido. Preciso de ajuda com o código que faz a leitura do arquivo txt.

9
  • Tem como colocar todo o código! principalmente do Angular
    – novic
    21/08/2017 às 22:19
  • Você viu o exemplo e ai serviu pra você?
    – novic
    23/08/2017 às 23:58
  • Ainda não tive tempo de testar a solução proposta. 24/08/2017 às 0:23
  • Ok !!! Thiago ...
    – novic
    24/08/2017 às 0:33
  • Virgilio Novic, o código que vc postou funciona, se eu criar um novo projeto e adicionar o código lê o arquivo e atribui o texto lido dentro da div perfeitamente. No entanto, aplicar esse código ao projeto que estou criando não funciona. O que eu gostaria que fazer é chamar essa função de leitura do arquivo através do service, atribuir o conteúdo lido a uma variável para então trabalhar com essa variável e depois mostrar o conteúdo lido numa table. 25/08/2017 às 13:30

1 Resposta 1

2

Para carregar o texto de um arquivo .txt com crie uma diretiva que no momento da alteração do input file vai mostrar o conteudo texto em uma div, exemplo:

var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
  $scope.text = {
    value: 'Esperando ...'
  };  
});
app.directive("fileTxt", function() {
  return {
    require: "ngModel",
    scope: true,
    link: function(scope, elem, attrs, ngModel) {
      elem.on("change", function(e) {
        var reader = new FileReader();
        reader.onload = (function(reader) {
          return function() {
            scope.$apply(function() {
              scope.text.value = reader.result;            
            });        
            return reader.result;
          }
        })(reader);
        reader.readAsText(elem[0].files[0]);
      });      
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <input type="file" file-txt ng-model="fileItem" name="fileTxt">
  <br />
  <br />
  <div>{{text.value}}</div>  
  
</div>

Não esqueça de colocar no seu input file a diretiva file-txt da seguinte forma:

 <input type="file" file-txt ng-model="fileItem" name="fileTxt">

Referencias

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .