Question

大家好我想解决这个问题。这是我的代码：

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

我上传图片时效果很好，但问题是我无法在点击时从我的阵列中删除它们。

Answer 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/

Answer 2

以下代码可以删除图像

while

从图像上载数组中删除所选图像而不仅仅是预览。

2 个答案: