Question

我有一个上传输入。通过以下选择，我在选择一些要上传的文件时创建了预览。但是我需要反向操作，可以单击预览将其删除，但是我不确定如何处理。

var imagesPreview = function(input, placeToInsertImagePreview) {
  if (input.files) {
    var filesAmount = input.files.length;
    for (i = 0; i < filesAmount; i++) {
      var reader = new FileReader();
      reader.onload = function(event) {
        $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview).addClass("img-fluid").wrap('<div class="col crop_img"></div>');
      }
      reader.readAsDataURL(input.files[i]);
    }
  }
};

$('#usp-files').on('change', function() {
  imagesPreview(this, 'div.gallery');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
img {
  width: 100px;
  height: 100px;
  margin-top: 10px;
  display: block;
  margin-right: 5px;
  float: left;
}
</style>
<div class="usp-input-wrap"> 
    <div class="input-group mb-3">
        <div class="custom-file">
            <input name="usp-files[]" id="usp-files" type="file" maxlength="999999" data-required="false" placeholder="Upload your images here" class="usp-input usp-input-files my_images select-file multiple custom-file-input" multiple="multiple">
            <label for="usp-files" class="usp-label usp-label-files custom-file-label">Upload your images</label>
        </div>
    </div>
</div>
<div class="gallery row"></div>

如何通过预览删除多个上传文件？

0 个答案: