时间戳

首页 > 解决方案 > 重叠图像预览

javascript - 重叠图像预览

问题描述

我想在上传之前创建一个预览图像。当我选择新图像时，代码不会在添加之前删除旧图像。当我选择新图像时，我想删除旧图像。

$(document).ready(function() {
  $(function() {
    // Multiple images preview in browser
    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);
          }
          reader.readAsDataURL(input.files[i]);
        }
      }
    };

    $('#gallery-photo-add').on('change', function() {
      imagesPreview(this, 'div.gallery');
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="files[]" multiple id="gallery-photo-add" class="chooseFile">

<div class="gallery">
</div>

标签： javascriptjquery

解决方案

不要使用异步文件读取器将图像读取为 base64，您只会浪费处理和内存。使用可以创建指向 blob/文件的引用的ObjectURLs

jQuery($ => {
  let imagesPreview = function(input, placeToInsertImagePreview) {
    $(placeToInsertImagePreview).empty()
    
    Array.from(input.files).forEach(file => {
      $('<img>', {
        src: URL.createObjectURL(file)
      }).appendTo(placeToInsertImagePreview)
    })
  }

  $('#gallery-photo-add').on('change', function() {
    imagesPreview(this, 'div.gallery')
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="files[]" multiple id="gallery-photo-add" class="chooseFile">

<div class="gallery"></div>

推荐阅读