AngularJS-使用FileReader API上传和显示图像（多个文件）

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

我使用以下示例，它可以完美运行，但是我想同时上传多张图片。

http://jsfiddle.net/kkhxsgLu/2/

<div ng-controller="MyCtrl">
<div ng-repeat="step in stepsModel">
    <img class="thumb" ng-src="{{step}}" />
</div>
<input type='file' ng-model-instant onchange="angular.element(this).scope().imageUpload(this)" />
 $scope.stepsModel = [];
$scope.imageUpload = function(element){
    var reader = new FileReader();
    reader.onload = $scope.imageIsLoaded;
    reader.readAsDataURL(element.files[0]);
}
$scope.imageIsLoaded = function(e){
    $scope.$apply(function() {
        $scope.stepsModel.push(e.target.result);
    });
}

谢谢您的帮助，我从angularjs开始

回答：

http://jsfiddle.net/orion514/kkhxsgLu/136/

<div ng-controller="MyCtrl">
<div ng-repeat="step in stepsModel">
    <img class="thumb" ng-src="{{step}}" />
</div>
<input type='file' ng-model-instant 
       onchange="angular.element(this).scope().imageUpload(event)"
       multiple />
$scope.stepsModel = [];
$scope.imageUpload = function(event){
     var files = event.target.files; //FileList object
     for (var i = 0; i < files.length; i++) {
         var file = files[i];
             var reader = new FileReader();
             reader.onload = $scope.imageIsLoaded; 
             reader.readAsDataURL(file);
     }
}
$scope.imageIsLoaded = function(e){
    $scope.$apply(function() {
        $scope.stepsModel.push(e.target.result);
    });
}