ng-change on <input type =“file”

Question

我試圖在文件輸入改變時運行我的upload()函數。 但是，我無法使其發揮作用。

HTML：

<input type="file" ng-model="image" ng-change="uploadImage()">

JS：

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

我究竟做錯了什么？

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

Answer 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

Answer 3

監聽文件輸入更改的另一種有趣方式是監視輸入文件的ng-model屬性。

像這樣：

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

JS代碼 - >

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

希望它可以幫助某人。

Answer 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); }; $scope.upload = function(file){ console.log(file); };