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

8 浏览
0 Comments

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

以下是一个完美运行的示例，但我想同时上传多个图片。

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

    



$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。

0

3 答案

0 Comments

问题的出现原因是使用了循环内的变量，应该使用files[0]。以下是解决方法：

var file = files[0];

如果你能将代码写出来，那么这个答案会更有用。

0
0 Comments

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

问题的出现的原因：

AngularJS内置的``指令不能处理``。因此需要使用自定义指令来处理。

解决方法：

创建一个名为`files-input`的指令，并将其与`ngModel`进行关联。

该指令的链接函数中添加一个change事件监听器，当文件选择发生变化时，将文件列表赋值给ngModel的视图值。

实现代码：

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>

以上的代码定义了一个名为`app`的AngularJS模块，并在该模块中创建了一个名为`files-input`的指令。在HTML代码中，使用``和`files-input`指令来实现文件选择和显示文件名的功能。

DEMO示例：

可以在PLNKR上查看DEMO演示。

0
0 Comments

问题的原因是需要在AngularJS中实现上传和显示图像，使用FileReader API来处理多个文件。解决方法是使用ng-model-instant指令和onchange事件来处理文件上传，并使用FileReader API将文件转换为DataURL，然后将结果存储在$scope.stepsModel数组中以供显示。

具体的解决方法如下所示：

1. 在HTML中，使用ng-controller指令来绑定控制器，使用ng-repeat指令来循环遍历$scope.stepsModel数组，并使用ng-src指令来显示图像。在文件上传的input元素中，使用ng-model-instant指令来实时更新模型，并使用onchange事件来触发imageUpload函数。同时，设置multiple属性以支持多文件上传。

2. 在AngularJS的控制器中，定义$scope.stepsModel数组来存储转换后的图像数据。定义imageUpload函数来处理文件上传操作。在函数中，通过event.target.files获取到上传的文件列表。然后，使用for循环遍历文件列表，并为每个文件创建一个FileReader对象。将onload事件处理函数设置为$scope.imageIsLoaded函数，并调用readAsDataURL方法将文件转换为DataURL。

3. 在$scope.imageIsLoaded函数中，使用$scope.$apply来更新视图。将e.target.result添加到$scope.stepsModel数组中，以便在HTML中显示图像。

以上代码可以满足上传和显示多个图像的需求。如果需要每次上传一个图像并拥有提交按钮，可以根据需求进行相应的修改。

完整的解决方案可以在下面的链接中找到：[http://jsfiddle.net/orion514/kkhxsgLu/136/](http://jsfiddle.net/orion514/kkhxsgLu/136/)

0