从屏幕和输入文件中删除图像

Question

我使用jquery和html加载了几个带输入文件的图像。如何删除屏幕图像和输入文件信息？例如在图像上使用点击事件？

$(document).ready(function() {

  $(document).on("change", "#UploadIMG", function(e) {
    showThumbnail(this.files);
  });


  function showThumbnail(files) {
    var TotalArquivos = files.length;
    $('#DivImagens').html('');

    for (var i = 0; i < TotalArquivos; i++) {

      var reader = new FileReader();
      reader.onload = function(event) {
        //$($.parseHTML('<img>')).attr('src', event.target.result).appendTo('#DivImagens').width(150);

        var EstruturaImg = '';
        EstruturaImg = '<div class="col-md-3">';
        EstruturaImg += '<img id="thumbnail' + i + '"';
        EstruturaImg += 'src = "' + event.target.result + '"';
        EstruturaImg += 'class="img-circle img-responsive center-block" alt="Imagem' + i + ' " width="150"/>	';
        EstruturaImg += '</div>';

        $('#DivImagens').append(EstruturaImg);

      }

      reader.readAsDataURL(files[i]);

    }

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="DivImagens">

</div>

<input type="file" name="UploadIMG" multiple class="form-control" id="UploadIMG">

Answer 1

我认为不可能重置类型文件的输入。你需要更换它。

这是一个相当粗略的例子......我相信你可以用更优雅的代码获得相同的结果。

$(document).on("change", "#UploadIMG", function(e) {
    showThumbnail(this.files);
    $(this).remove();
    $("#DivImagens").after('<input type="file" name="UploadIMG" multiple class="form-control" id="UploadIMG">');
  });