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");
  }
}