angularjs – 使用Angular JS进行文件选择

发布时间：2020-12-17 08:16:12 所属栏目：安全来源：网络整理

导读：我想用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"/out

我想用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');
    };
}

如何在AngularJS pickimg函数上绑定输入文件onchange操作？
而且如何操作上传的文件？

Angular不支持输入[type = file]的更改，因此您必须自己滚动更改实现。

首先，在HTML中，定义Javascript for forchange，如下所示：

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!