如何自定义jQuery图像预览代码

Question

我正在使用以下 jquery 脚本在上传前预览多张图片，效果很好，但我无法自定义它以匹配我的规格

 <script>

  $(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]);
        }
    }

};

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

</script>

我需要做一个

• 图像的固定宽度和高度，例如 200 像素或在引导程序 4 中显示为拇指
• 将图片放在一行中，左右边距为 10 像素，如果一行中的所有图片没有足够的空间，它们将换行到下一行

注意： 我在我的代码中使用 bootstrap 4

Answer 1

不要使用 FileReader 将它们读取为 base64，而是使用 URL.createObjectURL

jQuery($ => {
  /**
   * Multiple images preview in browser
   * 
   * @param {HTMLInputElement} input
   * @param {string} placeToInsertImagePreview
   */
  function imagesPreview (input, placeToInsertImagePreview) {
    for (const file of input.files) {
      $('<div>', {
        class: 'thumb-c',
        style: `background-image: url(${URL.createObjectURL(file)})`
      }).appendTo(placeToInsertImagePreview)
    }
  }

  $('#product_sub_images').on('change', function() {
    imagesPreview(this, 'div.gallery')
  })
})

Answer 2

这是一个将它们显示为背景图像的示例。这使您可以将它们保持在一致的高度和宽度。它确实会裁剪它们，但如果您想以一致的大小显示它们，这是不可避免的。

您的代码将是：

$(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('<div>')).addClass('thumb-c').css('background-image', `url(${event.target.result})`).appendTo(placeToInsertImagePreview);
        }
        reader.readAsDataURL(input.files[i]);
      }
    }
  };

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

这里有一个可测试的 sn-p 来展示。我将图像设置为 100x100，以便您更好地查看布局，但您可以在 css 中进行更改

let imgs = [
    "https://via.placeholder.com/350x150",
    "https://via.placeholder.com/350x150",
    "https://via.placeholder.com/350x150",
    "https://via.placeholder.com/350x150"
  ],
  placeToInsertImagePreview = $('.gallery');

imgs.forEach(i => $($.parseHTML('<div>')).addClass('thumb-c').css('background-image', `url(${i})`).appendTo(placeToInsertImagePreview));

.thumb-c {
  width: 100px;
  height: 100px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 4px;
  float: left;
  margin:0 10px 10px 0;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class='gallery'>

</div>