ng-change on <input type="file"答案

【问题标题】：ng-change on <input type="file"ng-change on <input type="file"
【发布时间】：2013-12-07 10:37:24
【问题描述】：

当文件输入发生更改时，我正在尝试运行我的upload() 函数。但是，我不能让它工作。

HTML：

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

JS：

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

我做错了什么？

【问题讨论】：

AngularJs: How to check for changes in file input fields?的可能重复

标签： javascript angularjs

【解决方案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>

【讨论】：

@Pixark 这能回答你的问题吗？
我刚刚遇到这个问题，您的解决方案有效。可惜 ng-change 似乎不适用于文件上传。
这行得通，但你将如何传递 $event？只是将 $event 作为函数参数会给出未定义的错误。
这个答案应该被接受......但是，为什么必须这样做呢？ angular.element(this).scope().XXX() 而不是 XXX() ..除了工作之外还有其他原因吗？
这在调试模式下不起作用；这可能会更好：stackoverflow.com/a/19647381/2056448

【解决方案2】：

使用 ng-file-select="upload($files)"

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

上传是一个函数：$scope.upload = function(file){ console.log(file); };

【讨论】：

我已经在小提琴中尝试过您的代码，但它不起作用。

【解决方案3】：

这是我制定的指令，可以完成您的要求。如果我没记错的话，我认为其他解决方案在生产模式下不起作用，但是这个解决方案可以。它是这样使用的：

<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

【讨论】：

有人给这个人一枚奖章。太伤心了，我是唯一的赞成票。您的解决方案就像一个魅力。感谢那。我认为它比其他的更有棱角。

【解决方案4】：

另一种监听文件输入变化的有趣方法是监视输入文件的 ng-model 属性。

像这样：

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

JS 代码 ->

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

希望它可以帮助某人。

【讨论】：