Question

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

$('#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]);
        }
    }
})

如果我上传了多张图片，则无法正常显示，并且只显示最后一张图片。我在reader.onload中找到，$（＆＃39;＃a＆＃39; + i）始终是最后一张图片的索引。如果我上传2张图片，它会在控制台中显示两个＃a1;如果我上传3张图片，则会显示3张＃a2。为什么会这样？

Answer 1

你需要一个闭包来保持i的值，但是jQuery有$.each，并且它创建了它自己的闭包

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

FIDDLE

FileReader.onload如何工作？

1 个答案: