从图像上传数组中删除选定的图像，而不仅仅是预览。答案

【问题标题】：Deleting the selected images from the image upload array not just the preview.从图像上传数组中删除选定的图像，而不仅仅是预览。
【发布时间】：2018-03-29 03:20:02
【问题描述】：

大家好，我正在努力解决这个问题。这是我的代码：

function handleFileSelect(evt) {
    var files = evt.target.files;

    for (var i = 0, f; f = files[i]; i++) {

      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      reader.onload = (function(theFile) {
        return function(e) {

          var span = document.createElement('span');
          span.innerHTML = ['<div class="col-md-6 margin-bottom-10"><div class="container_h"><img src="', e.target.result,'"  alt="Avatar"class="image_h width-100" style="width:100%"></div></div></div>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      reader.readAsDataURL(f);
    }
  }document.getElementById('file-input').addEventListener('change', handleFileSelect, false);

当我上传图片时它工作得很好，但问题是我无法在点击时从我的数组中删除它们。

【问题讨论】：

标签： javascript jquery arrays image

【解决方案1】：

试试这个。

HTML 标记：

<input type="file" id="file-input">

<div id="listContainer" class="lists"></div>

JS：

function handleFileSelect(evt) {
    var files = evt.target.files;

    for (var i = 0, f; f = files[i]; i++) {

      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      reader.onload = (function(theFile) {
        return function(e) {

          var span = document.createElement('span');
          span.innerHTML = ['<div class="col-md-6 margin-bottom-10"><div class="container_h"><img src="', e.target.result,'"  alt="Avatar"class="image_h width-100" style="width:100%"></div></div></div>'].join('');
          document.getElementById('listContainer').insertBefore(span, null);
        };
      })(f);

      reader.readAsDataURL(f);
    }
  }document.getElementById('file-input').addEventListener('change', handleFileSelect, false);
  var lists = document.getElementsByClassName('lists');
  for(var i=0; i<lists.length; i++) {
    lists[i].addEventListener('click', function(evt) {
        evt.target.parentNode.removeChild(evt.target);
    });
  }

工作演示：https://jsfiddle.net/r45waadf/

【讨论】：

【解决方案2】：

下面的代码可以去掉图片

<input type="file" name="" id="file-input">
<div id="list"></div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    function handleFileSelect(evt) {
        var files = evt.target.files;

        for (var i = 0, f; f = files[i]; i++) {

          if (!f.type.match('image.*')) {
            continue;
          }

          var reader = new FileReader();

          reader.onload = (function(theFile) {
            return function(e) {

              var span = document.createElement('span');
              span.innerHTML = ['<div class="remove">remove</div><div class="col-md-6 margin-bottom-10"><div class="container_h"><img src="', e.target.result,'"  alt="Avatar"class="image_h width-100" style="width:100%"></div></div></div>'].join('');
              document.getElementById('list').insertBefore(span, null);
            };
          })(f);

          reader.readAsDataURL(f);
        }
    }

    document.getElementById('file-input').addEventListener('change', handleFileSelect, false);
    $(document).on('click', '.remove', function(){
            $(this).closest('span').remove();
    });
</script>

【讨论】：