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

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[]选项卡中的文件。