使用 FileReader js 自定义预览图像

Question

我需要创建所选图像的自定义预览。我已经看到几个关于这样做的答案，他们通过创建一个 img 元素并使用 appendTo 将它们放在特定的 div 中来实现。我已成功完成此操作，如下所示 jquery "change event"

 $(document).on("change", "#file", function() {
    var countFiles = $(this)[0].files.length;
    var imgPreview = $("#img-preview");

    for (var i = 0; i < countFiles; i++) {
       var reader = new FileReader();
       reader.onload = function (e) {
         $("<img />", {
              "src": e.target.result,
              "class": "img-thumbnail"
         }).appendTo(imgPreview);
    }
    reader.readAsDataURL($(this)[0].files[i]);
  }
});

我遇到的问题是用以下结构预览图像：

这里是 bootstrap

的自定义结构

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="wraper-foto-grande d-flex justify-content-center">
                <img class="img-fluid d-flex align-items-center" src="img1.jpg">
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="wrapper-thumb d-flex justify-content-center">
                <img class="img-fluid d-flex align-items-center" src="img2.jpg">
            </div>
        </div>
        <div class="col-md-4">
            <div  class="wrapper-thumb d-flex justify-content-center">
                <img class="img-fluid d-flex align-items-center" src="img3.jpg">
            </div>
        </div>
        <div class="col-md-4">
            <div class="wrapper-thumb d-flex justify-content-center">
                <img class="img-fluid d-flex align-items-center" src="img4.jpg">
            </div>
        </div>      
    </div>
</div>

我试图用 target.result 创建一个数组，稍后在函数中使用它并创建上面提到的结构，但我有 创建数组为空的问题。我也看到了关于这个主题的几个答案，但我没有成功创建预览。

此处代码：

$(document).on("change", "#file", function() {
  var countFiles = $(this)[0].files.length;
  var imgPreview = $("#img-preview");
  var imagesArray = [];

  for (var i = 0; i < countFiles; i++) {
      var reader = new FileReader();
      reader.onload = function (e) {
          imagesArray.push(e.target.result);
      }
     reader.readAsDataURL($(this)[0].files[i]);
  }
  console.log(imagesArray.length); //show 0
  console.log(imagesArray); // guess select 4 images, show 4 elements inside but I cannot access
});

我的想法是在函数中使用 imagesArray 来创建具有 bootstrap 的 自定义结构，但我没有可以访问任何元素。

感谢您的帮助。

Answer 1

1st：检查是否选择了超过 1 张图像，然后有条件地设置 [col-12] class 用于第一次预览和其余设置 [col -4] class & 在图像附加到结果 div(#imageResults) 之前应该为空，如 $('#imageResults').html('');.

第二名：检查 inline condition 就像 i==0?'12':'4'.

注意： 我在图像父 div 中添加了 border class 仅用于测试目的。

$(document).on("change", "#file", function() {
  var countFiles = $(this)[0].files.length;
  //Result div empty before appending new selected image 
  $('#imageResults').html(''); 
  for (var i = 0; i < countFiles; i++) {
    //`const columnSet` for full col-12 or col-4 class
    const columnSet = (i==0?'12':'4');
    var reader = new FileReader();
    reader.onload = function (e) {
      // Append image preview divs
      $('#imageResults').append(`<div class="mb-3 col-`+columnSet+`">
        <div class="border d-flex justify-content-center">
          <img class="img-fluid d-flex align-items-center" src="`+e.target.result+`">
        </div>
      </div>`);
    }
    reader.readAsDataURL($(this)[0].files[i]);
  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="container my-3">
  <div class="row">
    <div class="col-md-12">
      <div class="input-group mb-3">
        <label class="custom-file">
          <input type="file" class="custom-file-input" id="file" accept="image/*" multiple="multiple">
          <span class="custom-file-label">Choose multiple image</span>
        </label>
      </div>
    </div>
  </div>
  <!-- Image Preview Area -->
  <div class="row" id="imageResults">
  </div>
</div>

使用 FileReader js 自定义预览图像

Custom preview images using FileReader js

javascript

jquery

image

preview