最简单的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()">

Angular的元素(比如指令的根元素)都是jQuery [Lite]对象。这意味着我们可以像这样注册事件监听器:

link($scope, $el) {
    const fileInputSelector = '.my-file-input'

    function setFile() {
        // access file via $el.find(fileInputSelector).get(0).files[0]
    }

    $el.on('change', fileInputSelector, setFile)
}

这是jQuery事件委托。在这里，监听器附加到指令的根元素。当事件被触发时，它将弹出到已注册的元素，jQuery将确定事件是否起源于匹配已定义选择器的内部元素。如果是，处理程序将触发。

这种方法的好处是:

处理程序被绑定到$元素，当指令作用域被销毁时，$元素将被自动清除。 模板中没有代码 即使在你注册事件处理程序(比如使用ng-if或ng-switch)时，目标委托(输入)还没有呈现也会工作

http://api.jquery.com/on/

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

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

简单的方法是编写自己的指令绑定到“change”事件。 只是让你们知道IE9不支持FormData所以你不能从change事件中得到file对象。

你可以使用ng-file-upload库，它已经支持IE的FileAPI polyfill，并简化了将文件发布到服务器的过程。它使用一个指令来实现这一点。

<script src="angular.min.js"></script>
<script src="ng-file-upload.js"></script>

<div ng-controller="MyCtrl">
  <input type="file" ngf-select="onFileSelect($files)" multiple>
</div>

JS:

//inject angular file upload directive.
angular.module('myApp', ['ngFileUpload']);

var MyCtrl = [ '$scope', 'Upload', function($scope, Upload) {
  $scope.onFileSelect = function($files) {
    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {
      var $file = $files[i];
      Upload.upload({
        url: 'my/upload/url',
        data: {file: $file}
      }).then(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      }); 
    }
  }
}];

我建议创建一个指令

<input type="file" custom-on-change handler="functionToBeCalled(params)">

app.directive('customOnChange', [function() {
        'use strict';

        return {
            restrict: "A",

            scope: {
                handler: '&'
            },
            link: function(scope, element){

                element.change(function(event){
                    scope.$apply(function(){
                        var params = {event: event, el: element};
                        scope.handler({params: params});
                    });
                });
            }

        };
    }]);

这个指令可以使用很多次，它使用自己的作用域，不依赖于父作用域。你也可以给handler函数一些参数。处理函数将与作用域对象一起调用，该对象在您更改输入时处于活动状态。 $apply在每次调用change事件时更新您的模型

我扩展了@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