使用Angular JS进行文件选择

Question

我想用AngularJS提取一个文件：

HTML：

<div ng-controller="TopMenuCtrl">
    <button class="btn" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
    <input type="file" ng-model="filepick" ng-change="pickimg()" multiple />
    <output id="list"></output> 
</div>

javascript：

angular.module('plunker', ['ui.bootstrap']);
function TopMenuCtrl($scope) {
    $scope.pickimg = function() {
        alert('a');
    };
}

如何onchange在AngularJS pickimg函数上绑定输入文件操作？我该如何处理之后上传的文件？

Answer 1

Angular尚不支持 input [type = file]的* ng-change ，因此您必须自己滚动onchange的实现。 *

首先，在HTML中，为onchange定义Javascript，如下所示：

<input ng-model="photo"
       onchange="angular.element(this).scope().file_changed(this)"
       type="file" accept="image/*" />

然后在您的Angular控制器代码中定义函数：

$scope.file_changed = function(element) {

     $scope.$apply(function(scope) {
         var photofile = element.files[0];
         var reader = new FileReader();
         reader.onload = function(e) {
            // handle onload
         };
         reader.readAsDataURL(photofile);
     });
};