Saltar al contenido

AngularJs: ¿Cómo verificar los cambios en los campos de entrada de archivos?

Verificamos exhaustivamente cada enunciados de nuestro espacio con el objetivo de mostrarte en todo momento información certera y actualizada.

Solución:

Hice una pequeña directiva para escuchar los cambios de entrada de archivos.

Ver JSFiddle

ver.html:


controlador.js:

app.controller('myCtrl', function($scope)
    $scope.uploadFile = function(event)
        var files = event.target.files;
    ;
);     

directiva.js:

app.directive('customOnChange', function() 
  return 
    restrict: 'A',
    link: function (scope, element, attrs) 
      var onChangeHandler = scope.$eval(attrs.customOnChange);
      element.on('change', onChangeHandler);
      element.on('$destroy', function() 
        element.off();
      );

    
  ;
);

Sin soporte vinculante para el control de carga de archivos

https://github.com/angular/angular.js/issues/1375

en lugar de

 

puedes intentar


Nota: esto requiere que la aplicación angular esté siempre en modo de depuración. Esto no funcionará en el código de producción si el modo de depuración está deshabilitado.

y en tu función cambia en vez de

$scope.fileNameChanged = function() 
   alert("select file");

puedes intentar

$scope.fileNameChanged = function() 
  console.log("select file");

A continuación, se muestra un ejemplo práctico de carga de archivos con arrastrar y soltar. La carga de archivos puede ser útil http://jsfiddle.net/danielzen/utp7j/

Información de carga de archivos angulares

URL para la carga de archivos AngularJS en ASP.Net

http://cgeers.com/2013/05/03/angularjs-file-upload/

Carga nativa de múltiples archivos de AngularJs con progreso con NodeJS

AngularJs native multi-file upload with progress

ngUpload: un servicio AngularJS para cargar archivos usando iframe

http://ngmodules.org/modules/ngUpload

Este es un refinamiento de algunos de los otros, los datos terminarán en un modelo ng, que normalmente es lo que desea.

Marcado (simplemente haga un attribute archivo de datos para que la directiva pueda encontrarlo)


JS

app.directive('file', function() 
    return 
        require:"ngModel",
        restrict: 'A',
        link: function($scope, el, attrs, ngModel)
            el.bind('change', function(event)
                var files = event.target.files;
                var file = files[0];

                ngModel.$setViewValue(file);
                $scope.$apply();
            );
        
    ;
);

valoraciones y reseñas

Si te animas, puedes dejar un tutorial acerca de qué te ha gustado de esta división.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4.5)


Tags : /

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *