无法将变量传递给阅读器，javascript中的onload函数

Question

请参见下面的代码

for (var i = 0; i < countFiles; i++) {
                // alert("i is "+i);
                console.log("i is "+i);
                 var reader = new FileReader();
                 reader.onload = function (e) {
                    // alert(i);
                    $("<div class=\"imagepreview\">"+i+"<img src="+e.target.result+" class=\"thumb-image\"><br>Image title: <br><input type=\"text\" class=\"required\" name=\"title"+i+"\" style=\"width: 90%;\"></div>").appendTo(image_holder);
                 }

                 image_holder.fadeIn(300);
                 $(".uploadbutton").fadeIn(300);
                 $("#uploadform").validate();
                 reader.readAsDataURL($(this)[0].files[i]);

                 // alert(i);
             } 

我想将i变量传递给该函数，以便将其显示在div中，但是我不断看到相同的数字。参见下图。如何使i变量在每个图像旁边显示不同的数字？