类似于这里的其他一些很好的答案，我写了一个指令来解决这个问题，但是这个实现更紧密地反映了附加事件的角度方式。

你可以像这样使用指令:

HTML

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

如您所见，您可以将所选择的文件注入到事件处理程序中，就像您将$event对象注入到任何ng事件处理程序中一样。

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

我扩展了@Stuart Axon的想法，为文件输入添加双向绑定(即允许通过将模型值重置为null来重置输入):

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

没有文件上传控件的绑定支持

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>

而不是

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

你能试试吗?

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

注意:这要求angular应用程序始终处于调试模式。如果调试模式被禁用，这将在产品代码中不起作用。

在函数中变化 而不是

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

你能试试吗?

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

下面是一个文件上传的工作示例，拖放文件上传可能会有帮助 http://jsfiddle.net/danielzen/utp7j/

Angular文件上传信息

在ASP中上传AngularJS文件的URL。网

https://github.com/geersch/AngularJSFileUpload

AngularJs原生多文件上传与NodeJS的进展

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

ngUpload - AngularJS中使用iframe上传文件的服务

http://ngmodules.org/modules/ngUpload

这个指令也会传递选定的文件:

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

    }
  };
});

HTML的使用方法:

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

在我的控制器中:

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

监听文件输入更改的另一种有趣方法是监视输入文件的ng-model属性。当然，FileModel是一个自定义指令。

是这样的:

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

JS代码->

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

希望它能帮助到一些人。

最简单的Angular jqLite版本。

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()">