在预览中显示多个图像

Question

我有这个表单，我可以在其中选择多个图像并在提交表单之前预览所选图像。 但只显示 1 张图像。 我想显示所有选定的图像。 请帮忙。

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="newstatus" runat="server">
    <div style="display: inline-flex">
      <div style="width: 160px">
        <input type="file" name="file-5[]" id="file-5" class="inputfile inputfile-4" data-multiple-caption="{count} files selected" multiple />
        <label for="file-5">
        <span style="display: none;">Choose a file&hellip;</span></label>
        <img id="status-img" src="#" alt="" width="150" height="150" /><br />
      <input type="submit" name="post" value="Post" class="post-btn" id="submit" />
    </div>
  </form>

Javascript：

<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#status-img').attr('src', e.target.result);
            $('.removeimg').fadeIn();
        }
        reader.readAsDataURL(input.files[0]);
    }
}

$("#file-5").change(function(){
    readURL(this);
});
</script>

Answer 1

您必须循环选择图像的数量并使用数据。

HTML 代码：添加预览 div。

<div id="imgs"></div>

JS代码：

 $("#file-5").on('change',function() {
 var fileList = this.files; 
 for(var i = 0; i < fileList.length; i++)
 {
      //get a blob 
      var t = window.URL || window.webkitURL;
      var objectUrl = t.createObjectURL(fileList[i]);
      $('#imgs').append('<img src="' + objectUrl + '" />');

      j = i+1;
      if(j % 3 == 0)
      {
        $('#imgs').append('<br>');
      }

 }
});