title: Loading images with loop to <img> tags
body: <p>I have following code:</p>
  
  <pre><code>$("input[type=file]").change(function readURL()
  {
     if (this.files)
     {
        var num = this.files.length;    
        for(var i = 0; i &lt; 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);
        }
     }
  });
  </code></pre>
  
  <p>And some HTML</p>
  
  <pre><code>&lt;img id="img1" class="img-thumbnail thumnbail"&gt;
  &lt;img id="img2" class="img-thumbnail thumnbail"&gt;
  &lt;img id="img3" class="img-thumbnail thumnbail"&gt;
  &lt;img id="img4" class="img-thumbnail thumnbail"&gt;
  &lt;img id="img5" class="img-thumbnail thumnbail"&gt;
  ...
  </code></pre>
  
  <p>What I'm trying to do is to load all images as a thumbnails to  tags, but only last is being loaded.
  Adding <code>console.log(i)</code> to <code>return</code> function showed me that this function returns last value of i i times. What I should do to make it work?</p>