AngularJs: Comment faire pour vérifier les changements dans le fichier de champs de saisie?

J'ai fait une petite directive pour écouter le fichier d'entrée change.

Vue JSFiddle

view.html:

<input type="file" custom-on-change="uploadFile">

controller.js:

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

directive.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();
      });

    }
  };
});

Le propre de la méthode est d'écrire votre propre directive de se lier à l'événement "change".
Juste pour vous informer que IE9 ne prend pas en charge FormData de sorte que vous ne peut pas vraiment obtenir le fichier d'objet à partir de l'événement de changement.

Vous pouvez utiliser ng-téléchargement de fichier bibliothèque qui prend déjà en charge c'est à dire avec FileAPI polyfill et de simplifier l'affichage du fichier sur le serveur. Il utilise une directive pour atteindre cet objectif.

<script src="angular.min.js"></script>
<script src="ng-file-upload.js"></script>

<div ng-controller="MyCtrl">
  <input type="file" ngf-select="onFileSelect($files)" multiple>
</div>

JS:

//inject angular file upload directive.
angular.module('myApp', ['ngFileUpload']);

var MyCtrl = [ '$scope', 'Upload', function($scope, Upload) {
  $scope.onFileSelect = function($files) {
    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {
      var $file = $files[i];
      Upload.upload({
        url: 'my/upload/url',
        data: {file: $file}
      }).then(function(data, status, headers, config) {
        //file is uploaded successfully
        console.log(data);
      }); 
    }
  }
}];

À l'instar de certaines autres bonnes réponses ici, j'ai écrit une directive pour résoudre ce problème, mais cette mise en œuvre plus proche de l'angle de fixation des événements.

Vous pouvez utiliser la directive comme ceci:

HTML

<input type="file" file-change="yourHandler($event, files)" />

Comme vous pouvez le voir, vous pouvez injecter les fichiers sélectionnés dans votre gestionnaire d'événement que vous donneriez à un $objet d'événement dans toute ng gestionnaire d'événement.

Javascript

angular
  .module('yourModule')
  .directive('fileChange', ['$parse', function($parse) {

    return {
      require: 'ngModel',
      restrict: 'A',
      link: function ($scope, element, attrs, ngModel) {

        //Get the function provided in the file-change attribute.
        //Note the attribute has become an angular expression,
        //which is what we are parsing. The provided handler is 
        //wrapped up in an outer function (attrHandler) - we'll 
        //call the provided event handler inside the handler()
        //function below.
        var attrHandler = $parse(attrs['fileChange']);

        //This is a wrapper handler which will be attached to the
        //HTML change event.
        var handler = function (e) {

          $scope.$apply(function () {

            //Execute the provided handler in the directive's scope.
            //The files variable will be available for consumption
            //by the event handler.
            attrHandler($scope, { $event: e, files: e.target.files });
          });
        };

        //Attach the handler to the HTML change event 
        element[0].addEventListener('change', handler, false);
      }
    };
  }]);

Je vous recommande de créer une directive

<input type="file" custom-on-change handler="functionToBeCalled(params)">

app.directive('customOnChange', [function() {
        'use strict';

        return {
            restrict: "A",

            scope: {
                handler: '&'
            },
            link: function(scope, element){

                element.change(function(event){
                    scope.$apply(function(){
                        var params = {event: event, el: element};
                        scope.handler({params: params});
                    });
                });
            }

        };
    }]);

cette directive peut être utilisée de nombreuses fois, il utilise son propre champ d'application et ne dépend pas de parent. Vous pouvez également donner quelques paramètres à la fonction de gestionnaire. Gestionnaire de fonction sera appelée avec l'objet de l'étendue, qui était actif lors de la modification de l'entrée.
$s'appliquent les mises à jour de votre modèle chaque fois que l'événement change est appelé

De travail Démo de "fichiers d'entrée" de la Directive qui Fonctionne avec ng-change^Un

De faire un <input type=file> élément de travail de la ng-changement la directive, il a besoin d'un la coutume de la directive qui fonctionne avec le ng-model directive.

<input type="file" files-input ng-model="fileList" 
       ng-change="onInputChange()" multiple />

La DÉMO

JS:

angular.module("app",[])
.directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
})

.controller("ctrl", function($scope) {
     $scope.onInputChange = function() {
         console.log("input change");
     };
})

HTML:

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="ctrl">
    <h1>AngularJS Input `type=file` Demo</h1>
    
    <input type="file" files-input ng-model="fileList" 
           ng-change="onInputChange()" multiple />
    
    <h2>Files</h2>
    <div ng-repeat="file in fileList">
      {{file.name}}
    </div>
  </body>

J'ai fait comme ceci;

<!-- HTML -->
<button id="uploadFileButton" class="btn btn-info" ng-click="vm.upload()">    
<span  class="fa fa-paperclip"></span></button>
<input type="file" id="txtUploadFile" name="fileInput" style="display: none;" />

//self is the instance of $scope or this
self.upload = function () {
   var ctrl = angular.element("#txtUploadFile");
   ctrl.on('change', fileNameChanged);
   ctrl.click();
}

function fileNameChanged(e) {
    console.log(self.currentItem);
    alert("select file");
}

Angulaire des éléments (tels que l'élément racine d'une directive) sont jQuery [Lite] objets. Cela signifie que nous pouvons enregistrer l'écouteur d'événement de la sorte:

link($scope, $el) {
    const fileInputSelector = '.my-file-input'

    function setFile() {
        //access file via $el.find(fileInputSelector).get(0).files[0]
    }

    $el.on('change', fileInputSelector, setFile)
}

C'est jQuery cas de délégation. Ici, l'auditeur est attaché à l'élément racine de la directive. Lorsque l'événement est déclenché, il fera des bulles jusqu'à l'élément enregistré et jQuery permettra de déterminer si l'événement provient d'un intérieur de l'élément correspondant à l'défini sélecteur. Si c'est le cas, le gestionnaire d'incendie.

Avantages de cette méthode sont:

• le gestionnaire est lié à l' $element qui seront automatiquement supprimés lorsque le champ d'application de la directive est détruit.
• pas de code dans le modèle
• fonctionnera même si la cible délégué (entrée) n'a pas encore été rendu lorsque vous vous inscrivez le gestionnaire d'événements (comme lors de l'utilisation de ng-if ou ng-switch)

http://api.jquery.com/on/