Функция загрузки Javascript

Question

У меня есть функция JavaScript для загрузки. В HTML у меня есть 3 поля, созданные для вставки изображений, однако, когда я выбираю некоторые изображения для загрузки, они не заполняют меня первыми 3 блоками (те, что созданы в HTML), а создают другие после этих 3. Кто-нибудь знает причину? Я всегда хочу вставить в 3, которые созданы, если вы выбираете 4, он просто должен создать еще 1.

Codepen

Javascript

$(document).ready(function() {
  document.getElementById('pro-image').addEventListener('change', readImage, false);

  $(".preview-images-zone").sortable();

  $(document).on('click', '.image-cancel', function() {
    let no = $(this).data('no');
    $(".preview-image.preview-show-" + no).remove();
  });
});

var num = 4;

function readImage() {
  if (window.File && window.FileList && window.FileReader) {
    var files = event.target.files; //FileList object
    var output = $(".preview-images-zone");

    for (let i = 0; i < files.length; i++) {
      var file = files[i];
      if (!file.type.match('image')) continue;

      var picReader = new FileReader();

      picReader.addEventListener('load', function(event) {
        var picFile = event.target;
        var html = '<div class="preview-image preview-show-' + num + '">' +
          '<div class="image-cancel" data-no="' + num + '">x</div>' +
          '<div class="image-zone"><img id="pro-img-' + num + '" src="' + picFile.result + '"></div>' + '</div>';

        output.append(html);
        num = num + 1;
      });

      picReader.readAsDataURL(file);
    }
    $("#pro-image").val('');
  } else {
    console.log('Browser not support');
  }
}

Answer 1

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

var num = 1;

function readImage() {
    // ...
    $(".preview-image.preview-show-" + num).remove();
    output.prepend(html);
    // ...
}

Если вы удалите все изображения, то окажетесь в состоянии, в котором больше нет заполнителей, я не уверен, если этоявляется желательным.

Редактировать

Я нашел способ, используя ваш код, чтобы получить желаемый результат, всегда имея 3 заполнителя. Удалите все заполнители в HTML и используйте этот код JS:

var output = $(".preview-images-zone");
var num = 1;

$(document).ready(function() {
  document
    .getElementById("pro-image")
    .addEventListener("change", readImage, false);
  output.append(createNewPreview(num++));
  output.append(createNewPreview(num++));
  output.append(createNewPreview(num++));
  output.sortable();

  $(document).on("click", ".image-cancel", function() {
    removePreview($(this).data("no"));
  });
});

function removePreview(n) {
  if (n) {
    $(".preview-image.preview-show-" + n).remove();
  } else if ($(".preview-image").length > 3) {
    const placeholders = $(".preview-image img:not([src])");
    if (placeholders.length) {
      placeholders
        .eq(0)
        .closest(".preview-image")
        .remove();
    }
  }

  if ($(".preview-image").length < 3) {
    output.append(createNewPreview(num++));
  }
}

function createNewPreview(id, src) {
  return $(
    `<div class="preview-image preview-show-${id}">
  <div class="image-cancel" data-no="${id}">x</div>
  <div class="image-zone"><img id="pro-img-${id}" ${
      src ? `src="${src}"` : ""
    }></div>
</div>`
  );
}

function readImage() {
  if (window.File && window.FileList && window.FileReader) {
    var files = event.target.files; //FileList object
    var output = $(".preview-images-zone");

    for (let i = 0; i < files.length; i++) {
      var file = files[i];
      if (!file.type.match("image")) continue;

      var picReader = new FileReader();

      picReader.addEventListener("load", function(event) {
        output.prepend(createNewPreview(num, event.target.result));
        num++;
        removePreview();
      });

      picReader.readAsDataURL(file);
    }
    $("#pro-image").val("");
  } else {
    console.log("Browser not support");
  }
}