web-dev-qa-db-ja.com

AngularJS-FileReader API（複数のファイル）を使用して画像をアップロードおよび表示します

次の例を使用します。完全に機能しますが、複数の画像を同時にアップロードしたいと思います。

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から始めました

angularjsfileuploadfilereader
6
Tony

解決策：

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

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ディレクティブを自動的に処理できます。

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>
0
georgeawg

Zypps987、ループ内ではなく、var file = files [0]を使用してみてください。

0
Guto Condé