JavaScript上传图片预览异常：仅最后一个div成功设置背景图

这个bug是JS两个特性叠加触发的：

• 变量作用域错误：原代码里创建mydiv时没有加const/let做显式声明，这个变量会变成隐式全局变量，所有循环迭代共享同一个变量存储地址。每轮循环创建新div元素时，都会覆盖这个全局变量里存的之前的div引用。
• 异步执行时机错位：FileReader.readAsDataURL是异步操作，onload回调不会在当前循环里立刻执行，要等文件读取完成后才会触发。当所有文件读取完成、回调真正执行时，整个循环已经跑完了，全局的mydiv变量早被最后一次循环的赋值覆盖成了最后一个div的引用。所有异步回调执行时，操作的都是同一个最后创建的div元素，前面创建的div从来没被设置过背景图，自然呈现空白。

• 给循环内的mydiv加上const做块级作用域声明，让每轮循环的div元素都被限制在当前迭代的作用域内，不会被后续循环覆盖引用，异步回调触发时就能准确匹配当轮对应的div元素设置样式。
• 可选优化：在onload回调中直接使用事件参数返回的读取结果，减少闭包对外部reader变量的引用，代码可读性更强。

修复后的可运行代码：

showImages(e.dataTransfer.files);
function showImages(files) {
    const imagesdiv = document.getElementById('imagess')
    Array.from(files).forEach(file => {
        const reader = new FileReader();
        // 块级声明，每轮循环独立的mydiv变量
        const mydiv = document.createElement('div');
        mydiv.classList.add('imagein');
        reader.readAsDataURL(file);
        // 直接从事件参数取读取结果
        reader.onload = (e) => {
            mydiv.style.backgroundImage = `url('${e.target.result}')`;
        };
        imagesdiv.appendChild(mydiv);
    });
}

内容的提问来源于stack exchange，提问作者user13553080