Question

我有以下代码：

$("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次的最后一个值。我该怎么做才能让它发挥作用？

Answer 1

你已经正确地创建了一个闭包，这是正确的做法，但你仍然引用了较高范围的i变量，而不是闭包中的qi。

改变这个：

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

要：

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

使用循环加载图像到<img/>标记

1 个答案: