使用FileReader js的自定义预览图像

Question

我需要创建自定义预览所选图像。我已经看到了一些有关此操作的答案，它们通过创建img元素并使用appendTo将其放置在特定的div中来实现。我已经成功完成了此操作，如下面的“更改事件” jQuery中所示]

 $(document).on("change", "#file", function() {
    var countFiles = $(this)[0].files.length;
    var imgPreview = $("#img-preview");

    for (var i = 0; i < countFiles; i++) {
       var reader = new FileReader();
       reader.onload = function (e) {
         $("<img />", {
              "src": e.target.result,
              "class": "img-thumbnail"
         }).appendTo(imgPreview);
    }
    reader.readAsDataURL($(this)[0].files[i]);
  }
});

我的[[问题是用以下结构预览图像：

这里是带有引导程序的自定义结构

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="wraper-foto-grande d-flex justify-content-center">
                <img class="img-fluid d-flex align-items-center" src="img1.jpg">
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="wrapper-thumb d-flex justify-content-center">
                <img class="img-fluid d-flex align-items-center" src="img2.jpg">
            </div>
        </div>
        <div class="col-md-4">
            <div  class="wrapper-thumb d-flex justify-content-center">
                <img class="img-fluid d-flex align-items-center" src="img3.jpg">
            </div>
        </div>
        <div class="col-md-4">
            <div class="wrapper-thumb d-flex justify-content-center">
                <img class="img-fluid d-flex align-items-center" src="img4.jpg">
            </div>
        </div>      
    </div>
</div> 

我试图用
target.result

创建一个数组，以便以后在函数中使用它并创建上述结构，但是我有创建的数组为空的问题。我也看到了有关此主题的几个答案，但未成功创建预览。这里代码：

$(document).on("change", "#file", function() {
  var countFiles = $(this)[0].files.length;
  var imgPreview = $("#img-preview");
  var imagesArray = [];

  for (var i = 0; i < countFiles; i++) {
      var reader = new FileReader();
      reader.onload = function (e) {
          imagesArray.push(e.target.result);
      }
     reader.readAsDataURL($(this)[0].files[i]);
  }
  console.log(imagesArray.length); //show 0
  console.log(imagesArray); // guess select 4 images, show 4 elements inside but I cannot access
});

我的想法是使用
imagesArray in function

创建bootstrap的自定义结构，但我无权访问任何元素。感谢您的帮助。

Answer 1

1st：检查是否选择了1张以上的图像，然后有条件地将[col-

12]类设置为第一个预览，并将其余的[col-4]类设置为＆在添加图像之前结果div(#imageResults)应该像$('#imageResults').html('');一样为空。

第二：像inline condition一样检查i==0?'12':'4'。

注：我在图像父div中添加了border类，仅用于测试目的。

$(document).on("change", "#file", function() {
  var countFiles = $(this)[0].files.length;
  //Result div empty before appending new selected image 
  $('#imageResults').html(''); 
  for (var i = 0; i < countFiles; i++) {
    //`const columnSet` for full col-12 or col-4 class
    const columnSet = (i==0?'12':'4');
    var reader = new FileReader();
    reader.onload = function (e) {
      // Append image preview divs
      $('#imageResults').append(`<div class="mb-3 col-`+columnSet+`">
        <div class="border d-flex justify-content-center">
          <img class="img-fluid d-flex align-items-center" src="`+e.target.result+`">
        </div>
      </div>`);
    }
    reader.readAsDataURL($(this)[0].files[i]);
  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="container my-3">
  <div class="row">
    <div class="col-md-12">
      <div class="input-group mb-3">
        <label class="custom-file">
          <input type="file" class="custom-file-input" id="file" accept="image/*" multiple="multiple">
          <span class="custom-file-label">Choose multiple image</span>
        </label>
      </div>
    </div>
  </div>
  <!-- Image Preview Area -->
  <div class="row" id="imageResults">
  </div>
</div>