使用Angular JS进行文件选择

  • Z时代
  • 2024-01-10
  • 分类：问答

我想用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函数上绑定输入文件操作？我该如何处理之后上传的文件？

回答：

Angular尚不支持 ，因此您必须自己滚动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);
     });
};

以上是 使用Angular JS进行文件选择 的全部内容， 来源链接： utcz.com/qa/421177.html

回到顶部