Javascript - 如何删除选定的图片？

Question

这是代码，所以这里是多个预览图像的代码。所以我想删除选定的图像？那么，当您上传图片时，您点击图片，图片就消失了，但它只是隐藏而不是删除？

我该如何解决这个问题？因为我正在使用 .remove(); 方法，但什么也没发生，它只是隐藏图像

    $("#files").on("change", handleFileSelect);
    selDiv = $("#selectedFiles");
    $("#myForm").on("submit", handleForm);
    $("body").on("click", ".selFile", removeFile);
  });

  var selDiv = "";
  var storedFiles = [];
  function handleFileSelect(e) {
    var files = e.target.files;
    var filesArr = Array.prototype.slice.call(files);
    var device = $(e.target).data("device");
    filesArr.forEach(function(f) {

      if (!f.type.match("image.*")) {
        return;
      }
      storedFiles.push(f);

      var reader = new FileReader();
      reader.onload = function(e) {
        var html = "<div><img src=\"" + e.target.result + "\" data-file='" + f.name + "' class='selFile' title='Click to remove'>" + f.name + "<br clear=\"left\"/></div>";
        $("#selectedFiles").append(html);
      }
      reader.readAsDataURL(f);
    });

  }

  function handleForm(e) {
    e.preventDefault();
    var data = new FormData();

    for (var i = 0, len = storedFiles.length; i < len; i++) {
      data.append('files', storedFiles[i]);
    }

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'handler.cfm', true);

    xhr.onload = function(e) {
      if (this.status == 200) {
        console.log(e.currentTarget.responseText);
        alert(e.currentTarget.responseText + ' items uploaded.');
      }
    }

    xhr.send(data);
  }

  function removeFile(e) {
    var file = $(this).data("file");
    for (var i = 0; i < storedFiles.length; i++) {
      if (storedFiles[i].name === file) {
        storedFiles.splice(i, 1);
        break;
      }
    }
    $(this).parent().remove();
  }

这是我的简单 HTML

<script src="aa.js"></script>
<form id="myForm">
  <input type="file" id="files" name="files" multiple>
  <div id="selectedFiles"></div>
  <br/>
  <input type="submit">
</form> 

Answer 1

您需要重置输入值:

 function removeFile(e) {
    var file = $(this).data("file");
    for (var i = 0; i < storedFiles.length; i++) {
      if (storedFiles[i].name === file) {
        storedFiles.splice(i, 1);
        break;
      }
    }
    $(this).parent().remove();

  // add it here
   jQuery("#files").val("");
  }