从图像上传数组中删除选定的图像，而不仅仅是预览. [英] Deleting the selected images from the image upload array not just the preview.

问题描述

大家好，我正在尝试解决这个问题.这是我的代码:

Hi everyone I am trying to solve this. Here's my code:

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);

当我上传图像时，它可以完美地工作，但是问题是我单击时无法从阵列中删除一个图像.

It works perfectly when I upload images but the problem I can not delete one them from my array on click.

推荐答案

尝试一下.

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/

这篇关于从图像上传数组中删除选定的图像，而不仅仅是预览.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！