Пользовательский предварительный просмотр изображений с помощью FileReader js

Question

Мне нужно создать пользовательский предварительный просмотр выбранных изображений . Я видел несколько ответов об этом, и они делают это, создавая элемент img и используя appendTo, чтобы поместить их в конкретный c 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]);
  }
});

Проблема У меня есть предварительный просмотр изображений со следующей структурой :

Здесь пользовательская структура с bootstrap

<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 для последующего использования в функции и создания структуры, упомянутой выше, но у меня проблема в том, что созданный массив пуст . Я также видел несколько ответов на эту топи c, но мне не удалось создать предварительный просмотр.

Здесь код:

$(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 в функция для создания пользовательской структуры с bootstrap, но у меня нет доступа ни к одному элементу.

Спасибо за вашу помощь.

Answer 1

1-й: Проверьте, выбрано ли больше 1 изображения, затем условно установите класс [col- 12] для первого предварительного просмотра и оставшейся части набора [col- 4] & перед добавлением изображения в результат div(#imageResults) должен быть пустым, как $('#imageResults').html('');.

2-й: проверка inline condition как i==0?'12':'4'.

Примечание: Я добавил border класс в родительский div изображения только для целей тестирования.

$(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>