时间戳

首页 > 解决方案 > 多个预览图像和删除

jquery - 多个预览图像和删除

问题描述

HTML

我有以下 HTML 代码用于预览结果

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

JS

这个javascript代码功能是做多个图像预览。

但我不知道如何制作代码来删除每张照片预览

 $(function() {

  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).attr('class','prevImage').appendTo(placeToInsertImagePreview);   
            }

            reader.readAsDataURL(input.files[i]);
        }
      }

  };

  $('#gallery-photo-add').on('change', function() {
    imagesPreview(this, 'div.gallery');
  });
});

标签： jquery

解决方案

看看 JSFiddle：https ://jsfiddle.net/2e6br85s/

我所做的事情：
1）为预览图像添加了一个 div 包装器。
2）然后在该包装器内添加一个“删除”锚标记。每当用户单击“删除”锚标记时，创建一个用于删除完整包装器 div 的函数。

JS代码：

$(function() {
  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) {
              var imgElement = $($.parseHTML('<img>')).attr('src', event.target.result).attr('class','prevImage').appendTo(placeToInsertImagePreview);
              imgElement.wrap('<div class="img-preview col-md-4"></div>');
              imgElement.parent().append('<p><a class="remove-image-preview" href="javascript:void(0);">Remove</a></p>');
            }

            reader.readAsDataURL(input.files[i]);
        }
      }
  };

  $('#gallery-photo-add').on('change', function() {
    imagesPreview(this, 'div.gallery');
  });

  $(document).on('click', 'a.remove-image-preview', function(){
    $(this).closest('.img-preview').remove();
  });
});

推荐阅读