时间戳

首页 > 解决方案 > 如何自定义jQuery图像预览代码

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

问题描述

我正在使用以下 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>

我需要做一个

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

标签： javascripthtmljquerycssbootstrap-4

解决方案

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

您的代码将是：

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

这是一个可测试的片段。我制作了 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>

推荐阅读