<input type="file">上的ng-change事件

Question

我正在尝试在文件输入变化时运行我的upload()函数。但是，我无法使它工作。

HTML：

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

JS:

-->

JavaScript：

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

我做错了什么？

- Pixark

---

可能是重复的问题：AngularJs：如何检查文件输入字段的更改？ - Ali Gonabadi

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>

- Aditya Singh

---

@Pixark 这个回答解决了你的问题吗？ - Aditya Singh

我刚遇到了这个问题，你的解决方案很有效。不过有点遗憾的是，似乎 ng-change 在文件上传时不能起作用。 - Jason Farnsworth

这个可以运行，但是你怎么传递 $event 呢？只是将 $event 作为函数参数传递会导致未定义错误。 - Matt McDonald

这个答案应该被接受...但是，为什么必须这样做呢？angular.element(this).scope().XXX()而不是XXX()..除了能够正常工作之外，还有其他原因吗？ - sports

除非在调试模式下，否则这个方法不起作用；也许这个方法更好：https://dev59.com/hmMm5IYBdhLWcg3wDbin#19647381 - Casey

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

- user3413723

---

给这个人一枚奖章。很难过我是唯一的点赞者。你的解决方案非常有效。感谢您。我认为它比其他方案更加 angular（可能指“角度更尖锐”或“更加欧洲化/现代化”）。 - Asier Paz

Answer 3

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

像这样：

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

JS代码 ->

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

希望这可以帮助您。

- halbano

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

- Leonardo

---

我已经在fiddle中尝试了你的代码，但它没有运行。 - rahim.nagori