图像上载和预览时的“删除”按钮

Question

我想选择多个图像，并给这些图像一个按钮，以便用户可以删除图像以及。我可以做图像的预览，但我不能删除图像后预览。

这是我的javascript代码

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

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

这是我的HTML代码，其中id=list是图像显示为缩略图的区域：

<div class="file-upload">
    <div class="file-select">
        <div class="file-select-button" id="fileName">Choose Image</div>
        <div class="file-select-name" id="noFile"></div>
        <input type="file" id="files" name="files[]" multiple />
    </div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-xs-12 xol-sm-12">
    <output id="list"></output>
</div>

如何插入删除选项与每一个图像？

Answer 1

我的Js代码：

  $(document).ready(function() {

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

        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {

          // Only process image files.
          if (!f.type.match('image.*')) {
            continue;
          }

          var reader = new FileReader();

          // Closure to capture the file information.
          reader.onload = (function(theFile) {
            return function(e) {
              // Render thumbnail.
              var span = document.createElement('span');
              span.innerHTML = ['<div class="col-lg-3 col-md-3 col-xs-3 xol-sm-3" id="butt"><div class="container1"><img class="thumb img-responsive" src="', e.target.result,'" title="', escape(theFile.name), '" /><div class="overlay"><div class="text"><i class="fa fa-trash-o" aria-hidden="true" style="font-size:40px;color:#fff;"></i></div></div></div></div>'].join('');
              document.getElementById('list').insertBefore(span, null);
            };
          })(f);

          // Read in the image file as a data URL.
          reader.readAsDataURL(f);
        }
      }

      document.getElementById('files').addEventListener('change', handleFileSelect, false);


      $('#list').on('click', '#butt',function () {
              $(this).parent('span').remove();

      //this is not working...
      var i = array.indexOf($(this));
      if(i != -1) {
          array.splice(i, 1);
      }
      // tried this too:
      //$(this).parent('span').splice( 1, 1 );

      count--;
      });
});

我的Html代码：

 <div class="row bgcolor">
                            <div class="col-lg-6 col-md-16 col-xs-12 xol-sm-12">
                                <div class="file-upload">
                                    <div class="file-select">
                                        <div class="file-select-button" id="fileName">Choose Images
                                        </div>
                                        <input type="file" id="files" name="files[]" multiple />

                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-xs-12 xol-sm-12">
                                <output id="list">  

                                </output>
                            </div>
                        </div>

我的css代码：

.container1 {
  position: relative;
  width: 92%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -14px;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
      background-color: #000;
}
.overlay1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -14px;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 3;
  transition: .5s ease;
/*      background-color: #000;*/
}
.container1:hover .overlay1 {
 opacity: 0.2;
}


.container1:hover .overlay {
 opacity: 0.2;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

这是正确答案！！！

谢谢你的帮助

Answer 2

检查此https://jsfiddle.net/dp722j27/10/

您可以使用如下所示的delete方法

function deleteImage() { 
    var index = Array.from(document.getElementById('list').children).indexOf(event.target.parentNode)
    document.querySelector("#list").removeChild( document.querySelectorAll('#list span')[index]);
    totalFiles.splice(index, 1);
    console.log(totalFiles)
}

和您的呈现方法类似

  var span = document.createElement('span');
  span.innerHTML = ['<img width=100 class="thumb" src="', e.target.result,
                    '" title="', escape(theFile.name), '"/>', "<button onclick='deleteImage()'>delete</button>"].join('');

  document.getElementById('list').insertBefore(span, null);

您可以将这些值存储在数组中，并像这样处理它