加载带有循环的图像到<img>标签

Loading images with loop to <img> tags

本文关键字：标签 img 循环 图像 加载      更新时间：2023-09-26

我有以下代码:

$("input[type=file]").change(function readURL()
{
   if (this.files)
   {
      var num = this.files.length;    
      for(var i = 0; i < num ; i++)
      {
         var file = this.files[i];
         var reader = new FileReader();
         reader.onload = function(qi)
         {
            return function()
            {
            $("#img"+(i)).attr('src',event.target.result);
            };
         }(i);
         reader.readAsDataURL(file);
      }
   }
});

和一些HTML

<img id="img1" class="img-thumbnail thumnbail">
<img id="img2" class="img-thumbnail thumnbail">
<img id="img3" class="img-thumbnail thumnbail">
<img id="img4" class="img-thumbnail thumnbail">
<img id="img5" class="img-thumbnail thumnbail">
...

我要做的是将所有图像作为缩略图加载到标签，但只有最后一个正在加载。将console.log(i)添加到return函数中，这个函数返回i的最后值i次。我该怎么做才能成功?

您已经正确地创建了一个闭包，这是正确的事情，但是您仍然从上层作用域引用i变量，而不是从闭包引用qi。

改变:

$("#img"+(i)).attr('src',event.target.result);

: 

$("#img"+(qi)).attr('src',event.target.result);
//        ^^ use qi here
相关文章：