Ng-change на <input type="file"

Ответ 1

Попробуйте это: - http://jsfiddle.net/adiioo7/fA968/

JS: -

function myCtrl($scope) {
    $scope.uploadImage = function () {
        console.log("Changed");
    }
}

HTML: -

<div ng-app ng-controller="myCtrl">
    <input type="file" ng-model="image" onchange="angular.element(this).scope().uploadImage()" />
</div>

Ответ 2

Вот директива, которую я сделал, которая выполняет то, что вы просите. Если я не ошибаюсь, я думаю, что другие решения не будут работать в режиме производства, но это так. Он используется так:

<input ng-upload-change="fileChanged($event)" />

В вашем контроллере:

$scope.fileChanged = function($event){
    var files = $event.target.files;
}

И для того, чтобы директива включала где-то в ваш код:

angular.module("YOUR_APP_NAME").directive("ngUploadChange",function(){
    return{
        scope:{
            ngUploadChange:"&"
        },
        link:function($scope, $element, $attrs){
            $element.on("change",function(event){
                $scope.$apply(function(){
                    $scope.ngUploadChange({$event: event})
                })
            })
            $scope.$on("$destroy",function(){
                $element.off();
            });
        }
    }
});

Этот код выпущен в общественное достояние, не требуется никаких атрибутов.

Вы также должны знать, что если кто-то выбирает файл, закрывает ввод файла, а затем снова выбирает тот же файл позже, он не будет запускать функцию изменения еще раз. Чтобы исправить это, я создал более полную директиву, которая заменяет вход под капотом каждый раз, когда вы его используете. Я поставил его на github:

https://github.com/dtruel/angular-file-input/tree/master

Ответ 3

Еще один интересный способ прослушивания изменения ввода файла - наблюдать за атрибутом ng-model входного файла.

Вот так:

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

Код JS →

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

Надеюсь, это поможет кому-то.

Ответ 4

Используйте ng-file-select = "upload ($ files)"

'<input type="file" class="form-control" ng-model="alunos.file" accept="image/*" ng-file-select="upload($files)"/>'

где upload - это функция: $scope.upload = function(file){ console.log(file); };