Question

我有一个将图像文件上传到服务器的模块。现在我尝试在上传到服务器之前添加预览和删除功能。当我按下删除时，它会从预览中删除，但图像文件仍然保留在列表中，并在按下上传按钮时上传到服务器。如何从列表中删除这些文件？

这是html部分

<form action="<?php echo $_SERVER['PHP_SELF'] ?>"  method="post" 
  enctype="multipart/form-data">
<input type="file" id="file" name="file[]" multiple />
<p><div id="image-holder"></div></p>
<input type="submit" name="upload" value="Click to upload file">
</form>

这里是jquery part

var abc = 0; 
$(document).ready(function() {  
if (window.File && window.FileList && window.FileReader) {
$("#file").on("change", function(e) {
  var files = e.target.files,  
  filesLength = files.length;
  var image_holder = $("#image-holder");
  abc += 1; 
  var z = abc - 1;

  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\" id='abcd" + abc + "'>" +
        "<img class=\"imageThumb\" src=\"" + e.target.result + "\" alt=\"" + file.name + "\" +title=\"" + file.name + "\"/>" +
        "<br/><span class=\"remove\">Remove</span>" +
        "</span>").appendTo(image_holder);
       $(".remove").click(function(){
        $(this).parent(".pip").remove();
                 });             
    });
    fileReader.readAsDataURL(f);
  }
});
} 
});

我认为如果我添加另一个文件会有同样的问题，它只会上传最后一个文件而不包括以前选择的文件。

如何从列表中删除文件（图像）？

0 个答案: