Предварительная загрузка изображений из более чем одного файла - PullRequest
Новая
       43

Предварительная загрузка изображений из более чем одного файла

0 голосов
/ 31 марта 2020

Я нахожу метод для предварительной загрузки изображения перед загрузкой, но у меня есть более одного входного файла. И я хочу для каждого входного файла предварительно загрузить изображение. В общем, не большая проблема, но количество файловых входов, используемых на сайте, не является стабильным. Пользователь может добавить блок загрузки изображений, чтобы он мог добавить 2 или 3, и я хочу, чтобы для каждого объявления он имел возможность предварительно загрузить изображение. Но мой опыт не достигает того уровня, который ему нужен. Итак, мой вопрос, возможно ли это реализовать? Мой код для предварительной загрузки изображения для одного указанного c файла ввода такой: 

    function readURL(input) {
          if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                              $('#blah')
                                        .attr('src', e.target.result)
                                        .height(50);
                    };
                    reader.readAsDataURL(input.files[0]);
          }
}

Если пользователь добавляет один блок изображения, это выглядит так: 

<div id="divImage-1" class="form-group form-file-upload">
<label id="labelImage-1" for="labelImage2-1">New Picture</label>
<div></div>
<label id="labelImage2-1" for="inputImage-1" class="form-file-upload1">Upload Image</label>
<input id="inputImage-1" type="file" onchange="readURL(this);">
<img id="blah" height="50" alt="Image preview">
</div>

Если пользователь создает второй, все идентификаторы которого равны 2 (divImage-2).

1 Ответ

2 голосов
/ 31 марта 2020

Предположим, что это в вашем HTML

<button class="btn btn-primary" id="addBtn">Add Image Block</button>

<div class="container"></div>

Затем, в качестве первого шага, вам нужно создать две глобальные переменные:

  1. let imageBlockCout = 0 для подсчета числа блоки изображений.
  2. let addedPicSet = nnew Set() набор имен pi c, которые используются другими блоками.

Затем для каждого нажатия на кнопку добавления мы добавим новый блок изображения с кодом, скажем: 

    $(
      $.parseHTML(
        `<div class="row">
                <input type="file" multiple id="photos-${imageBlockCount}">
                <div id="gallery-${imageBlockCount}" class="row"></div>
             </div>`
      )
    ).appendTo(".container");

Теперь для каждого добавленного файла необходимо подключить прослушиватель при изменении: 

   let currentBlockCount = imageBlockCount;
    $("#photos-" + imageBlockCount).on("change", function () {
      let input = this;

      if (!input.files) {
        return;
      }

      //for every image that has been read by FileReader we show it
      //in its own card inside its button gallery
      let onFileLoaded = function (event) {
        $(
          $.parseHTML(
            `<div class="col-sm-3">
                <div class="card">
                  <img 
                    class="card-img-top" 
                    src="${event.target.result}">
                </div>
              </div`
          )
        ).appendTo("#gallery-" + currentBlockCount);
      };

      //input.files is an array like object, so we convert it to array
      Array.from(input.files)
        .filter(
          //first we filter images which are already in use
          (file) => !addedPicSet.has(file.name)
        )
        .forEach((file) => {
          let reader = new FileReader();
          //we attach an onLoad listener for each reader
          reader.onload = onFileLoaded;

          //then we tell the reader object which file to read
          reader.readAsDataURL(file);

          //add the image name in the set of used image names
          addedPicSet.add(file.name);
        });
    });

Я также сделал ручку для вашего помощь: https://codepen.io/abdullah-shabaz/pen/qBdvZMQ

...