Javascript FileReader.onload是如何工作的？

我正在尝试预览上传的图片，下面是代码

$('#upload-photo').on('change', '.inventory-photo', function() {       
    if (this.files.length >= 1) {

        for (var i =0; i < this.files.length; i++) {
            $('#photo-preview').append('<img id="a'+ i + '"' + 'src="" />');
            var reader = new FileReader();

            reader.onload = function(e) {
                $('#a'+0).attr("src", e.target.result);
                console.log($('#a' + i));
            }

            reader.readAsDataURL(this.files[i]);
        }
    }
})

$（'#上传照片'）。在（'change'，'.inventory photo'，函数（）上{
如果（this.files.length>=1）{
对于（var i=0；i

---

如果我上传多个图像，它不能正常工作，它只显示最后一个图像。我发现在reader.onload中，$（'#a'+I）总是最后一幅图像的索引。如果我上传两张图片，它会在控制台中显示两张a1；如果我上传3张图片，它会显示3张a2。为什么会发生这种情况

您需要一个闭包来保持

i

的值，但是jQuery有

$。每个

，它都创建自己的闭包

$('#upload-photo').on('change', '.inventory-photo', function() {       
    $.each(this.files, function(index, file) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('<img />', {
                id : 'a' + index,
                src: e.target.result
            }).appendTo('#photo-preview')
         }
         reader.readAsDataURL(file);
    });
});

$（'#上传照片'）。在（'change'，'.inventory photo'，函数（）上{
$.each（this.files，函数（索引，文件）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$('
为什么我们需要闭包？我可以这样写吗：reader.onload=function（e）{console.log（i）}（）；它正确地显示“i”您需要闭包，因为
onload
回调是异步的，所以当它触发循环时，循环已经完成，
i
将始终具有它设置的最后一个值。