如何从多个文件上传中删除图像

Question

我创建了带有预览和删除选项的多个图像上传功能。但是当我选择文件时，假设有 4 张图像，然后它会正确预览 4 张图像。现在我从预览中删除了其中的 2 个并尝试在数据库中上传，但它仍然上传 4 个图像而不是 2 个图像。

$(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#vpb-data-file").on("change", function(e) {
      var files = e.target.files,
        filesLength = files.length;

      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();

        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" height=\"100\" width=\"100\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\">Remove</span>" +
            "</span>").insertAfter("#ml_image");

          $(".remove").click(function() {
            $(this).parent(".pip").remove();
          });

          // Old code here
          /*$("<img></img>", {
            class: "imageThumb",
            src: e.target.result,
            title: file.name + " | Click to remove"
          }).insertAfter("#files").click(function(){
            $(this).remove();
          });*/
        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});

<div class="card-body">
  <div class="row" id="ml_image" style="margin-top:15px;">
    <div class="col-md-3">
      <label class="form-label">Upload Image<br>
       <span style="font-size:12px;">(For multiple images press ctrl.)</span>
      </label>
    </div>
    <div class="col-md-6">
      <span onclick="product_image();" id="hide_span" class="btn btn-icon btn-primary file_upload_icon" style="margin-top:6px;"><i class="fas fa-cloud-upload-alt" style="font-size:31px;"></i><strong style="color:#000000;padding:10px;font-size:15px;">Choose File...</strong></span><input
        style="display:none;" type="file" name="p_image[]" id="vpb-data-file" multiple />
    </div>
  </div>
  <div class="row" id="vpb-display-preview"></div>
</div>

$p_image = count($_FILES['p_image']['name']);
print_r($p_image);

我在这里计算要上传多少个文件。我得到的是 4 而不是 2。

Answer 1

您的remove 函数必须删除e.target.files 或p_image[] 选项卡中的文件。