Ich bin neu in eckig. Ich versuche, den hochgeladenen Dateipfad aus dem HTML-Feld "Datei" zu lesen, wenn in diesem Feld eine "Änderung" erfolgt. Wenn ich 'onChange' benutze, funktioniert es, aber wenn ich es mit 'ng-change' eckig benutze, funktioniert es nicht.

<script>
   var DemoModule = angular.module("Demo",[]);
   DemoModule .controller("form-cntlr",function($scope){
   $scope.selectFile = function()
   {
        $("#file").click();
   }
   $scope.fileNameChaged = function()
   {
        alert("select file");
   }
});
</script>

<div ng-controller="form-cntlr">
    <form>
         <button ng-click="selectFile()">Upload Your File</button>
         <input type="file" style="display:none" 
                          id="file" name='file' ng-Change="fileNameChaged()"/>
    </form>  
</div>

fileNameChaged () ruft niemals auf. Firebug zeigt auch keinen Fehler.

Keine Bindungsunterstützung für das Steuerelement zum Hochladen von Dateien

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>

anstatt

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

kannst du es versuchen

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

Hinweis: Dazu muss sich die Winkelanwendung immer im Debug-Modus befinden . Dies funktioniert im Produktionscode nicht, wenn der Debug-Modus deaktiviert ist.

und in deiner Funktion ändert sich statt

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

kannst du es versuchen

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

Im Folgenden finden Sie ein funktionierendes Beispiel für das Hochladen von Dateien mit Drag-Drop-Dateien. Das Hochladen von Dateien kann hilfreich sein. Http://jsfiddle.net/danielzen/utp7j/

Informationen zum Hochladen von Winkeldateien

URL für das Hochladen von AngularJS-Dateien in ASP.Net

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

AngularJs nativer Upload mehrerer Dateien mit Fortschritten bei NodeJS

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

ngUpload - Ein AngularJS-Dienst zum Hochladen von Dateien mit iframe

http://ngmodules.org/modules/ngUpload

Ich habe eine kleine Anweisung gemacht, um auf Änderungen bei der Dateieingabe zu warten.

JSFiddle anzeigen

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

    }
  };
});

Dies ist eine Verfeinerung einiger der anderen, die Daten werden in einem ng-Modell enden, was normalerweise das ist, was Sie wollen.

Markup (erstellen Sie einfach eine Attribut-Datendatei, damit die Direktive sie finden kann)

<input
    data-file
    id="id_image" name="image"
    ng-model="my_image_model" type="file">

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

Der saubere Weg besteht darin, eine eigene Direktive zu schreiben, um sie an das Ereignis "change" zu binden. Nur um Sie wissen zu lassen, dass IE9 FormData nicht unterstützt, sodass Sie das Dateiobjekt nicht wirklich aus dem Änderungsereignis abrufen können.

Sie können die ng-file-upload- Bibliothek verwenden, die IE bereits mit FileAPI-Polyfill unterstützt, und das Posten der Datei auf dem Server vereinfachen. Es verwendet eine Richtlinie, um dies zu erreichen.

<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);
      }); 
    }
  }
}];

Ich habe die Idee von @Stuart Axon erweitert, eine bidirektionale Bindung für die Dateieingabe hinzuzufügen (dh das Zurücksetzen der Eingabe durch Zurücksetzen des Modellwerts auf Null zu ermöglichen):

app.directive('bindFile', [function () {
    return {
        require: "ngModel",
        restrict: 'A',
        link: function ($scope, el, attrs, ngModel) {
            el.bind('change', function (event) {
                ngModel.$setViewValue(event.target.files[0]);
                $scope.$apply();
            });

            $scope.$watch(function () {
                return ngModel.$viewValue;
            }, function (value) {
                if (!value) {
                    el.val("");
                }
            });
        }
    };
}]);

Demo

Ähnlich wie bei einigen anderen guten Antworten hier habe ich eine Anweisung geschrieben, um dieses Problem zu lösen, aber diese Implementierung spiegelt die eckige Art des Anhängens von Ereignissen genauer wider.

Sie können die Direktive wie folgt verwenden:

HTML

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

Wie Sie sehen, können Sie die ausgewählten Dateien in Ihren Ereignishandler einfügen, so wie Sie ein $ event-Objekt in einen beliebigen ng-Ereignishandler einfügen würden.

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);
      }
    };
  }]);

Diese Anweisung übergibt auch die ausgewählten Dateien:

/**
 *File Input - custom call when the file has changed
 */
.directive('onFileChange', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var onChangeHandler = scope.$eval(attrs.onFileChange);

      element.bind('change', function() {
        scope.$apply(function() {
          var files = element[0].files;
          if (files) {
            onChangeHandler(files);
          }
        });
      });

    }
  };
});

Der HTML-Code, wie man ihn benutzt:

<input type="file" ng-model="file" on-file-change="onFilesSelected">

In meinem Controller:

$scope.onFilesSelected = function(files) {
     console.log("files - " + files);
};

Ich empfehle eine Richtlinie zu erstellen

<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});
                    });
                });
            }

        };
    }]);

Diese Direktive kann mehrfach verwendet werden, verwendet ihren eigenen Bereich und hängt nicht vom übergeordneten Bereich ab. Sie können der Handlerfunktion auch einige Parameter zuweisen. Die Handlerfunktion wird mit dem Bereichsobjekt aufgerufen, das aktiv war, als Sie die Eingabe geändert haben. $ apply aktualisiert Ihr Modell jedes Mal, wenn das Änderungsereignis aufgerufen wird

Die einfachste Angular jqLite-Version.

JS:

.directive('cOnChange', function() {
    'use strict';

    return {
        restrict: "A",
        scope : {
            cOnChange: '&'
        },
        link: function (scope, element) {
            element.on('change', function () {
                scope.cOnChange();
        });
        }
    };
});

HTML:

<input type="file" data-c-on-change="your.functionName()">

Arbeitsdemo der "Dateieingabe" -Richtlinie, die mit ¹ funktioniertng-change

Damit ein <input type=file>Element mit der Direktive ng-change funktioniert , benötigt es eine benutzerdefinierte Direktive , die mit der Direktive ng-model funktioniert .

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

Die DEMO

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");
     };
})

<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>

Zu vollständige Lösung basiert auf:

`onchange="angular.element(this).scope().UpLoadFile(this.files)"`

Eine einfache Möglichkeit, das Eingabefeld auszublenden und durch ein Bild zu ersetzen, hier nach einer Lösung, die ebenfalls einen Winkel-Hack erfordert, aber die Aufgabe erfüllt [TriggerEvent funktioniert nicht wie erwartet]

Die Lösung:

• Platzieren Sie das Eingabefeld in der Anzeige: keine [das Eingabefeld ist im DOM vorhanden, aber nicht sichtbar]
• Platzieren Sie Ihr Bild direkt nach Auf dem Bild verwenden Sie nb-click (), um eine Methode zu aktivieren

Wenn Sie auf das Bild klicken, simulieren Sie eine DOM-Aktion, indem Sie auf das Eingabefeld klicken. Et voilà!

 var tmpl = '<input type="file" id="{{name}}-filein"' + 
             'onchange="angular.element(this).scope().UpLoadFile(this.files)"' +
             ' multiple accept="{{mime}}/*" style="display:none" placeholder="{{placeholder}}">'+
             ' <img id="{{name}}-img" src="{{icon}}" ng-click="clicked()">' +
             '';
   // Image was clicked let's simulate an input (file) click
   scope.inputElem = elem.find('input'); // find input in directive
   scope.clicked = function () {
         console.log ('Image clicked');
         scope.inputElem[0].click(); // Warning Angular TriggerEvent does not work!!!
    };

Ich habe es so gemacht;

<!-- 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");
}

Eine weitere interessante Möglichkeit, Änderungen an der Dateieingabe abzuhören, besteht darin, das Attribut ng-model der Eingabedatei zu überwachen. Natürlich ist FileModel eine benutzerdefinierte Direktive.

So was:

HTML -> <input type="file" file-model="change.fnEvidence">

JS Code ->

$scope.$watch('change.fnEvidence', function() {
                    alert("has changed");
                });

Hoffe es kann jemandem helfen.

Winkelelemente (z. B. das Stammelement einer Direktive) sind jQuery [Lite] -Objekte. Dies bedeutet, dass wir den Ereignis-Listener folgendermaßen registrieren können:

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)
}

Dies ist die jQuery-Ereignisdelegierung. Hier wird der Listener an das Stammelement der Direktive angehängt. Wenn das Ereignis ausgelöst wird, sprudelt es bis zum registrierten Element und jQuery bestimmt, ob das Ereignis von einem inneren Element stammt, das mit dem definierten Selektor übereinstimmt. In diesem Fall wird der Handler ausgelöst.

Vorteile dieser Methode sind:

• Der Handler ist an das $ -Element gebunden, das automatisch bereinigt wird, wenn der Gültigkeitsbereich der Direktive zerstört wird.
• Kein Code in der Vorlage
• funktioniert auch dann, wenn der Zieldelegat (Eingabe) bei der Registrierung des Ereignishandlers noch nicht gerendert wurde (z. B. bei Verwendung von ng-ifoder ng-switch).

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

Sie können einfach den folgenden Code in onchange hinzufügen, um Änderungen zu erkennen. Sie können eine Funktion auf X-Klick oder etwas schreiben, um Dateidaten zu entfernen.

document.getElementById(id).value = "";