AngularJS - 使用 FileReader API 上传和显示图像（多个文件）[重复]答案

【问题标题】：AngularJS - upload and display image using FileReader API (multiple files) [duplicate]AngularJS - 使用 FileReader API 上传和显示图像（多个文件）[重复]
【发布时间】：2015-10-18 08:37:43
【问题描述】：

我用下面的例子，效果很好，但是我想同时上传多张图片。

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 开始的

【问题讨论】：

标签： angularjs file upload filereader

【解决方案1】：

解决方案：

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

【讨论】：

如果您想一次上传 1 张图片并有一个提交按钮，您会如何执行此操作？你能把代码贴出来吗？
@gerogeawg 很棒的答案

【解决方案2】：

使用`ng-model`（多个文件）获取文件输入的指令

AngularJS 内置的<input> 指令不处理<input type=file>。为此需要一个自定义指令。

<input type="file" files-input ng-model="fileArray" multiple>

files-input 指令：

angular.module("app").directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
})

上述指令添加了一个更改侦听器，该侦听器使用 input 元素的 files 属性更新模型。

该指令使<input type=file> 能够自动与ng-change 和ng-form 指令一起使用。

DEMO on PLNKR

`files-input` 指令的内联演示

angular.module("app",[]);

angular.module("app").directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
});

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app">
    <h1>AngularJS Input `type=file` Demo</h1>
    
    <input type="file" files-input ng-model="fileArray" multiple>
    
    <h2>Files</h2>
    <div ng-repeat="file in fileArray">
      {{file.name}}
    </div>
  </body>

【讨论】：

【解决方案3】：

Zypps987，尝试使用 var file = files[0]，而不是在循环中。

【讨论】：

如果你把代码写出来，这个答案会更有用。

使用ng-model（多个文件）获取文件输入的指令

files-input 指令的内联演示

使用`ng-model`（多个文件）获取文件输入的指令

`files-input` 指令的内联演示