javascript - ng-if

¿Cómo leer un archivo en AngularJS?

Question

¿Es posible leer archivos en AngularJS? Quiero colocar el archivo en un lienzo HTML5 para recortar.

Estaba pensando en usar una directiva? Este es el código javscript que quiero poner en mi directiva:

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $(''#blah'').attr(''src'', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

Answer 1

Lector de archivos angulares.

link: function(scope, element, attrs) {
            element.on(''change'', function(e) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    scope.$apply(function() {
                       scope.onReadFile({$content:e.target.result});
                    });
                };
                reader.readAsText((e.srcElement || e.target).files[0]);
            });
        }

Ejemplo en vivo: Live Run On Plunker

Answer 2

Sí, las directivas son una forma correcta, pero se ve un poco diferente:

.directive("ngFileSelect",function(){    
  return {
    link: function($scope,el){          
      el.bind("change", function(e){          
        $scope.file = (e.srcElement || e.target).files[0];
        $scope.getFile();
      });          
    }        
  }
})

Ejemplo de trabajo: http://plnkr.co/edit/y5n16v?p=preview

Gracias a lalalalalmbda por este enlace .

Answer 3

Tomé el código de Cherniv y lo doblé todo en una directiva:

.directive(''fileSelect'', [''$window'', function ($window) {
    return {
        restrict: ''A'',
        require: ''ngModel'',
        link: function (scope, el, attr, ctrl) {
            var fileReader = new $window.FileReader();

            fileReader.onload = function () {
                ctrl.$setViewValue(fileReader.result);

                if (''fileLoaded'' in attr) {
                    scope.$eval(attr[''fileLoaded'']);
                }
            };

            fileReader.onprogress = function (event) {
                if (''fileProgress'' in attr) {
                    scope.$eval(attr[''fileProgress''], 
                    {''$total'': event.total, ''$loaded'': event.loaded});
                }
            };

            fileReader.onerror = function () {
                if (''fileError'' in attr) {
                    scope.$eval(attr[''fileError''], 
                    {''$error'': fileReader.error});
                }
            };

            var fileType = attr[''fileSelect''];

            el.bind(''change'', function (e) {
                var fileName = e.target.files[0];

                if (fileType === '''' || fileType === ''text'') {
                    fileReader.readAsText(fileName);
                } else if (fileType === ''data'') {
                    fileReader.readAsDataURL(fileName);
                }
            });
        }
    };
}]);

A continuación, puede utilizar la directiva de la siguiente manera:

<input type="file" ng-model="file.data" 
       file-select="data" 
       file-loaded="myLoaded()"
       file-error="myError($error)" 
       file-progress="myProgress($total,$loaded)">

Donde "file.data", "myLoaded", "myError", y "myProgress" están en el ámbito adjunto.