Javascript 上载前预览图像时出现意外行为

在上传多张图片之前，我一直在预览这些图片，并尝试使用@ratan paul对非常有用的。然而，当我尝试稍微调整代码时，我得到了一个意想不到的结果。我所做的是为每个

创建一个

标记，以添加一些样式选项。以下是我最终得到的jQuery代码：

$(function () {
    var span_id = "";
    function readURL(input) {
        for(var i =0; i< input.files.length; i++){
            var span = $('<span>');
            span_id = "span"+i;
            span.attr('id',span_id);
            span.appendTo('#img-previews');
            if (input.files[i]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    var img = $('<img id="dynamic">');
                    img.attr('src', e.target.result);
                    img.attr('height','150px');
                    img.attr('width','200px');
                    img.appendTo("#"+span_id);
                };
                reader.readAsDataURL(input.files[i]);
            }
        }
    }

    $("#imgUpload").change(function(){
        readURL(this);
    });
});

$（函数（）{
var span_id=“”；
函数readURL（输入）{
对于（var i=0；i

标记，但是所有的图像都被塞进了最后创建的

中。另一方面，如果我调试脚本，我会得到想要的结果，每个图像都被插入到自己的

标记中。如果有人有任何想法，我会有点困惑至于为什么会发生这种情况或如何避免这种情况，我们将不胜感激

下面是我在不调试的情况下运行脚本的屏幕抓图：

下面是使用js调试器时的屏幕抓取结果

---

短篇小说：

将循环更改为

for(let i =0; i< input.files.length; i++){

请注意，这些

span

元素的创建可能会以无序结束；如果您希望它们按照添加时的顺序进行，请查看使用（或版本）

---

另外请注意，我还没有测试上述内容，因此可能需要进行一些调整。

我尝试使用let语句@duncan smith切换for循环，但结果没有改变。在我的IDE（phpstorm 2017.1.4）中，“let”表示错误，表示“当前JavaScript版本不支持当前版本中的let定义”。我使用的是yii2框架，当前安装的jquery版本是2.2.4。我目前测试的浏览器是mozilla firefox 54.0（32位）、firefox developer edition 55.0b6（64位）和chrome 59.0.3071.115（官方版本）（64位）.有什么问题吗？@natral，我已经更新了我的答案。看看它是否对你有用。太好了，这对邓肯很有帮助。谢谢！

function readURL(input) {
    for(var i =0; i< input.files.length; i++){
        if (input.files[i]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var span = $('<span>');
                var uniqueId;
                do {  //simple loop to generate a unique id
                  uniqueId = 'img-' + (Math.random()+1).toString(36).substring(2, 7);
                } while ($('#' + uniqueId).length > 0); //redo loop if id not unique
                span.attr('id', uniqueId);
                span.appendTo('#img-previews');

                var img = $('<img>');
                img.attr('src', e.target.result);
                img.attr('height','150px');
                img.attr('width','200px');
                span.append(img);
            };
            reader.readAsDataURL(input.files[i]);
        }
    }
}