Javascript 使用FileReader js自定义预览图像

我需要创建所选图像的自定义预览。我已经看到了一些关于这样做的答案，他们是通过创建一个img元素并使用appendTo将它们放在一个特定的div中来实现的。我已经成功地做到了这一点，如jquery“更改事件”中所示

$（document）.on（“更改”，“文件”，函数（））{
var countFiles=$（this）[0].files.length；
var imgPreview=$（“img预览”）；
对于（var i=0；i问题是我必须预览具有以下结构的图像：


这里是带有引导的自定义结构

<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> 



我尝试创建一个带有目标的数组。结果以后在函数中使用它并创建上面提到的结构，但是我遇到了问题，即创建的数组是空的。我也看到了关于这个主题的一些答案，但我没有成功创建预览

此处代码：

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

$（document）.on（“更改”，“文件”，函数（））{
var countFiles=$（this）[0].files.length；
var imgPreview=$（“img预览”）；
var-imagesArray=[]；
对于（var i=0；i

我的想法是在函数中使用imagesArray创建带有引导的自定义结构，但我没有访问任何元素的权限

感谢您的帮助。
1：检查是否选择了多个图像，然后有条件地设置[col-
12
]类用于第一次预览，其余的[col-
<4
]类和在结果
div（#imageResults）
中添加图像之前应为空，如
$（'imageResults'）.html（“”）；


第二：
检查
内联条件
如
i==0？'12'：'4'


注意：我在image parent div中添加了
border
类，仅供测试之用。


$（document）.on（“更改”，“文件”，函数（））{
var countFiles=$（this）[0].files.length；
//追加新选定图像前结果div为空
$（'#imageResults'）.html（''）；
对于（var i=0；i


选择多个图像
非常感谢！！Raeesh Alam:D！它就像我想要的那样工作：）所以我想说这个标记是正确的答案。使用
URL.createObjectURL
代替。。。
$(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
});