Angularjs: Uncaught TypeError: Не удалось выполнить «readAsDataURL» на «FileReader»: Параметр 1 не относится к типу «Blob»

Question

Мне нужно загрузить несколько изображений в DIV, я стараюсь ниже

угловой код:

 $scope.stepsModel = []; 
     $scope.imageUpload = function(element){ 
      var reader = new FileReader(); 
      reader.onload = $scope.imageIsLoaded; 
      reader.readAsDataURL(element.files); 
     } 

     $scope.imageIsLoaded = function(e){ 
      $scope.$apply(function() { 
      $scope.stepsModel.push(e.target.result); 
      }); 
     } 

HTML код:

<input type="file" ng-model-instant name="myImage" accept="image/*" onchange="angular.element(this).scope().imageUpload(event)"/> 

Я получил эту ошибку:

Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'. 
at b.$scope.imageUpload (new_ads.js:34) 
at HTMLInputElement.onchange (new_ads:202) 

Я видел некоторые ссылки здесь, что все для загрузки одного изображения, мне нужно загрузить несколько изображений один за другим в div.

Может кто-нибудь мне помочь, спасибо за это заранее.

Answer 1

Ваш код требуют 2 изменения

1: Его не element.files но element.target как элемент здесь пары Решимость события

2: .files является массив вам необходимо выбрать первый файл файлами [0]

$scope.imageUpload = function(element){ 
     var reader = new FileReader(); 
     reader.onload = $scope.imageIsLoaded; 
     //console.log(element.target.files[0]) 
     reader.readAsDataURL(element.target.files[0]); 

    } 

Смотрите эту скрипку http://jsfiddle.net/ADukg/9867/