Question

我想选择多个图像，并在浏览器上显示所选图像。
当我选择单个图像时，我的代码工作正常。

如何修改我的代码，以便它可以在浏览器上选择并显示多个图像？

HTML代码：

<input type="file" name="file" id='file' multiple="multiple" required="required" onchange="angular.element(this).scope().imageUpload(event)"/>

图片预览：

 <img ng-src="{{step}}" class="thumb">

角度代码：

$scope.imageUpload = function(event){
  var files = event.target.files;
  var file = files[files.length-1];
  $scope.file = file;
  var reader = new FileReader();
                reader.onload = $scope.imageIsLoaded;
                reader.readAsDataURL(file);
}

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

我尝试过的事情：

我没有传递单个file元素，而是通过了array of files，但后来我得到了这个例外：
Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'. at b.$scope.imageUpload (products.js:174) at HTMLInputElement.onchange (VM2346 multer:1)

修改后的代码：

$scope.imageUpload = function(event){
  var files = event.target.files;
  var file = []
  for(var i = 0 ; i < event.target.files.length ; i++){

file.push(event.target.files[i]);

}

file.forEach(function(element){
  console.log('File array log :' + element.name);
})
  $scope.file = file;
  var reader = new FileReader();
                reader.onload = $scope.imageIsLoaded;
                reader.readAsDataURL(file);
}

请帮忙。

Answer 1

我发现这对我有用

function previewImages() {

  var $preview = $('#preview').empty();
  if (this.files) $.each(this.files, readAndPreview);

  function readAndPreview(i, file) {
    
    if (!/\.(jpe?g|png|gif)$/i.test(file.name)){
      return alert(file.name +" is not an image");
    } // else...
    
    var reader = new FileReader();

    $(reader).on("load", function() {
      $preview.append($("<img/>", {src:this.result, height:100}));
    });

    reader.readAsDataURL(file);
    
  }

}

$('#file-input').on("change", previewImages);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="file-input" type="file" multiple>
<div id="preview"></div>

Answer 2

方法readDataURL是读取一个文件而不是文件数组，除此之外，你的html只期望一个图像而且它没有处理如何显示一组图像。您的控制器脚本应如下所示：

// inside your controller's script: 

$scope.imageUpload = function(event){ 
  var steps= [];
  var isLastFile = false;

  for(var i = 0 ; i < event.target.files.length ; i++){  
    console.log('File array log :' + event.target.files[i].name);
    var reader = new FileReader();
    reader.onload = $scope.imageIsLoaded;
    if(i == event.target.files.length - 1){
      isLastFile  = true;
    }
    reader.readAsDataURL(event.target.files[i]);
 }
 $scope.imageIsLoaded = function(e){
    $scope.$apply(function(){
    steps.Push(e.target.result);
      if(isLastFile){
        $scope.steps = steps;
      } 
    })
 }
}

还可以在html视图中尝试以下操作：

<ol>
   <li ng-repeat="step in steps"> <img ng-src="{{step}}" class="thumb"></li>
</ol>

如何使用angularJs预览多个图像？

2 个答案: