Javascript 使用循环加载图像到<；img>；标签

我有以下代码：

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

$（“输入[type=file]”）。更改（函数readURL（）
{
if（this.files）
{
var num=this.files.length；
对于（变量i=0；i

还有一些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

变量，而不是闭包中的

qi

更改此项：

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

致：

---

您已经正确地创建了一个闭包，这是正确的操作，但是您仍然在引用上部范围中的

i

变量，而不是闭包中的

qi

更改此项：

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

致：

---

快速观察：如果

qi

从零开始，你的img标签从

\img1

开始，你必须在

$（“\img”+（qi+1））

上加1才能看到第一张图片。快速观察：如果

qi

从零开始，你的img标签从

\img1

开始，你必须在

$（“\img”+（qi+1））上加1

以查看第一张图像。