使用 jquery 更改事件后显示多张图像

【问题标题】：Show mulitple images after event change using jquery使用 jquery 更改事件后显示多张图像
【发布时间】：2019-12-22 18:43:24
【问题描述】：

我有一个多输入文件，我想在一个 div 中显示选定的图像。我尝试使用此代码，但它只显示了第一张图片

我试试这个：

function readURL(input) {
  var reader = new FileReader();

  reader.onload = function(e) {
    for (var i = 0; i <= input.files.length; i++) {
      var imgId = $('<img />', {
        id: 'show_bultin_paie-' + input.files[i].lastModified,
        alt: 'MyAlt'
      });
      imgId.appendTo($('#imagediv'));
      $(imgId).attr('src', e.target.result);
    }

  }

  reader.readAsDataURL(input.files[0]);

}
}
$('#file_test').change(function(event) {
  readURL(this);
});

【问题讨论】：

标签： javascript jquery ajax file input

【解决方案1】：

您并没有循环所有文件，您只是在读取第一个文件 (reader.readAsDataURL(input.files[0]);)。使用let 而不是var，因为您在循环内执行异步操作。

function readURL(input) {
  for (let i = 0; i < input.files.length; i++) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $('#imagediv').append("<img src='"+e.target.result+"'>");
    }
    reader.readAsDataURL(input.files[i]);
  }
}



$('#file_test').change(function(event) {
  readURL(this);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=file id=file_test multiple accept='image/png, image/jpg, .png, .jpg'>
<div id=imagediv></div>

【讨论】：