1

JS

    myapp.controller(function($scope){
  $scope.msg="Hola"
  $scope.$watch('file',function(file){
    console.log('arguments', file);
  })
});

myapp.directive("fileinput", function(){
    return{
        scope : {
            fileinput : "=",
            filepreview: "="
        },
        link:function(scope,element,attrs){
            element.bind("change", function(changeEvent){
                scope.fileinput = changeEvent.target.files[0];
                var reader = new new FileReader();
                reader.onload = function(loadEvent){
                    scope.$apply(function(){
                        scope.filepreview = loadEvent.target.result;
                    });
                }
                reader.readAsDataURL(scope.fileinput);
            });
        }
    };
});

HTML

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#/">
         <!-- <img alt="Brand" src="..."> --> accueil
      </a>
    </div>
  </div>
</nav>
<input type="file" fileinput="file" filepreview="filepreview" />
<p> {{ msg }} </p>

<p> {{ filepreview }} </p>
<div id="3d-graph"></div>

Me sale el siguiente error

angular.js:14800 Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.9/$controller/ctrlreg?p0=controllerAutomate
    at angular.js:88
    at angular.js:11049
    at Object.link (angular-route.min.js:7)
    at angular.js:1383
    at va (angular.js:10619)
    at p (angular.js:10008)
    at f (angular.js:9248)
    at angular.js:9113
    at angular.js:9504
    at d (angular.js:9291) "<ng-view class="ng-scope">"

1 respuesta 1

2

Para leer los datos de un fichero obtenido por un <input type="file" ...> necesitas un FileReader. Te pongo un ejemplo básico:

let div=document.getElementById('datos');
function handleFileSelect(evt) {
    let files = evt.target.files; // FileList object
    let file=files[0];
    let fr= new FileReader();
    fr.onload = function(event) {
    
      div.innerHTML =event.target.result
    };
    fr.readAsText(file);
  }

  document.getElementById('file').addEventListener('change', handleFileSelect, false);
<input type="file" id="file" name="file"  />

<div id="datos" />

1
  • Muchas gracias entendi muy bien de hecho ya lo habia hecho pero ahora estoy haciendon la migracion de javascript a AngularJS el 9 mar. 2018 a las 13:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.