AngularJs : Comment faire pour vérifier les modifications dans les champs d’entrée de fichier ?

Question

Je suis nouveau sur angulaire. Je suis en train de lire le chemin d’accès du fichier téléchargé du champ « file » HTML chaque fois qu’un « changement » se passe sur ce terrain. Si j’utilise « onChange » ça marche mais quand j’ai utiliser de façon angulaire à l’aide de « changement ng » il ne fonctionne pas.

fileNameChaged() n’est jamais appeler. Firebug, aussi ne montre aucune erreur.

Answer 1

J’ai fait une petite directive pour écouter les modifications apportées aux entrées de fichier :

directive.js :

View.html :

Controller.js :

Answer 2

Pas de prise en charge de liaison pour le Téléchargement de Fichiers de contrôle

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

<div ng-controller="form-cntlr">
        <form>
             <button ng-click="selectFile()">Upload Your File</button>
             <input type="file" style="display:none" 
                id="file" name='file' onchange="angular.element(this).scope().fileNameChanged(this)" />
        </form>  
    </div>

au lieu de

 <input type="file" style="display:none" 
    id="file" name='file' ng-Change="fileNameChanged()" />

pouvez-vous essayer

<input type="file" style="display:none" 
    id="file" name='file' onchange="angular.element(this).scope().fileNameChanged()" />

et dans ta fonction des changements au lieu de

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

pouvez-vous essayer

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

Ci-dessous est un exemple de travail de l'upload de fichier par glisser-déposer de dossier de téléchargement peut être utile http://jsfiddle.net/danielzen/utp7j/

Angulaire De Téléchargement De Fichiers D'Informations

URL pour AngularJS Upload de Fichier en ASP.Net

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

AngularJs native multi-upload de fichier avec le progrès avec NodeJS

http://jasonturim.wordpress.com/2013/09/12/angularjs-native-multi-file-upload-with-progress/

ngUpload - Un Service AngularJS pour le téléchargement de fichiers à l'aide d'une iframe

http://ngmodules.org/modules/ngUpload

Answer 3

Il s’agit d’un raffinement de quelques-uns des autres autour, les données seront retrouveront dans le ng-modèle, qui est normalement ce que vous voulez.

Balisage (juste faire un fichier de données attribut donc la directive peut le trouver)

JS

Answer 4

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 angulaires-chargement d'un fichier de 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="angular-file-upload.js"></script>

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

JS:

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

var MyCtrl = [ '$scope', '$http', function($scope, $http) {
  $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];
      $http.uploadFile({
        url: 'my/upload/url',
        file: $file
      }).then(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      }); 
    }
  }
}];

Answer 5

Semblable à certaines autres réponses bonnes ici, j’ai écrit une directive visant à résoudre ce problème, mais cette implémentation reflète plus étroitement la façon angulaire d’attacher des événements.

Vous pouvez utiliser la directive comme ceci :

HTML

Comme vous pouvez le voir, vous pouvez injecter les fichiers sélectionnés dans votre gestionnaire d’événements, comme vous serait un objet $event injecter tout gestionnaire d’événements de ng.

JavaScript