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

我使用下面的例子，它工作得很好，但我想同时上传多个图像

---

感谢您的帮助，我从angularjs开始解决方案：

：）

$scope.stepsModel=[]；
$scope.imageUpload=函数（事件）{
var files=event.target.files；//文件列表对象
对于（var i=0；i

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

指令获取使用

ng模型输入的文件（多个文件）
AngularJS内置的
指令不处理
。这需要一个自定义指令

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

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

此指令使
能够自动使用
ng change
和
ng form
指令



文件输入指令的内联演示

angular.module（“app”，[]）；
angular.module（“app”）指令（“fileInput”，function（）{
返回{
要求：“ngModel”，
链接：功能后链接（范围、元素、属性、ngModel）{
要素开启（“变更”，功能（e）{
var files=elem[0]。文件；
ngModel.$setViewValue（文件）；
})
}
}
});

AngularJS输入`type=file`Demo
文件夹
{{file.name}
如果您希望一次上载一张图像，并有一个提交按钮，您将如何做到这一点？你能帮我把代码贴出来吗？@gerogeawg-Awesome-answer如果你把代码写出来，这个答案会更有用。
 $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);
    });
}

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

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

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