从本地文件加载时未触发 Javascript 图像加载答案

【问题标题】：Javascript image onload not firing when loading from local file从本地文件加载时未触发 Javascript 图像加载
【发布时间】：2013-03-24 22:57:59
【问题描述】：

我试图让用户在上传图片之前预览一张图片与另一张图片组合时的外观（想想枪射击子弹）。我可以让图像加载到图像元素中，但是 onload 事件不会触发（在 chrome 和 firefox 中测试）。我尝试使用 setTimeout 作为一个肮脏的黑客，但不幸的是 bullet.image.height 似乎没有在相对较短的时间内设置。

这是我正在尝试做的一个示例：

if (input.target.files && input.target.files[0]) {
    var file = new FileReader();

    file.onload = function (event) {
        // this part works fine
        var bullet = {};
        bullet.id = 0;
        bullet.image = new Image();
        bullet.image.onload = function () {
            // This never fires
            bullet.offset_y = bullet.image.height / 2;

            $('#modal-weapons-field-bullet').append('<option value="0">' + bullet.title + '</option>');
            $('#modal-weapons-field-bullet').val(0);
        };

        bullet.src = event.target.result;
        bullet.offset_x = 0;
        bullet.title = input.target.files[0].name;
    }

    file.readAsDataURL(input.target.files[0]);
}

【问题讨论】：

我做了一个非常相似的事情，但是使用了 file.onloadend 而不是 file.onload，这有什么改变吗？ bullet.src 应该是 bullet.image.src 吗？
onloadend 没有用，但你对 bullet.image.src 很满意——把它写下来作为答案，我会接受的。当堆栈溢出用户让我看起来很愚蠢时，我讨厌它:-)

标签： javascript image filereader

【解决方案1】：

bullet.src 应该是bullet.image.src

【讨论】：