javascript - 如何添加删除实际图像输入的删除按钮及其预览缩略图（JS）

Question

我有多个图像文件输入。每个选定文件都有一个带有删除缩略图图标的预览缩略图。但此图标仅删除缩略图。我需要这个图标来删除缩略图预览和实际上传的图像。请帮我做。先感谢您！！

window.onload = function() {

  //Check File API support
  if (window.File && window.FileList && window.FileReader) {
    var filesInput = document.getElementById("files");

    filesInput.addEventListener("change", function(event) {

      var files = event.target.files; //FileList object
      var output = document.getElementById("result");

      for (var i = 0; i < files.length; i++) {
        var file = files[i];

        //Only pics
        if (!file.type.match('image'))
          continue;

        var picReader = new FileReader();

        picReader.addEventListener("load", function(event) {

          var picFile = event.target;

          var div = document.createElement("div");

          div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
            "title='" + picFile.name + "'/> <a class='remove_pict'>X</a>";

          output.insertBefore(div, null);
          div.children[1].addEventListener("click", function(event) {
            div.parentNode.removeChild(div);
          });

        });

        //Read the image
        picReader.readAsDataURL(file);
      }

    });
  } else {
    console.log("Your browser does not support File API");
  }
}

<form>
  <article>
    <label for="files" class="upload_multiple_photos">Select files...</label>
    <input id="files" type="file" name="my-file" value="" accept="image/png, image/gif, image/jpeg" multiple/>
    <output id="result" />
  </article>
  <input id="submit" type="submit" value="Submit">
</form>

标签： javascript