未设置默认图像

Question

我正在使用window.FileReader来提供用户选择上传的图像的即时预览。

我已经创建了这个jsFiddle

我有以下问题：

A）第63-77行中的代码似乎被忽略了，尽管当我在第25行中打印“ i”的值时，我看到它正在增加（我怀疑它一定与window.Filereader的性质有关。不确定）。

if (i == 0) //if this is the first picture add it as primary too 
{
    var primaryimage = ' <img id=' + filename + '  height="220" width="220" src=' + this.result + ' /> ';

    $('#primary-pic').find('.custom-input-file').hide();
    $('#primary-pic').find('p').hide();
    $('#primary-pic').append(primaryimage);
    $('.custom-input-file').show();
}

B）如果您添加多个图像并出于某种原因按下“设置为默认值”，这似乎不适用于最后一张图像，但不知道为什么。

谢谢

Answer 1

您的代码有很多错误。

其中：

• 一个很长的函数的深层嵌套，很难读取和调试。
• 可变范围：你认为i是某种“冻结”当你创建一个处理程序。 事实上， i的处理程序中读取在同样i作为主要功能：

在此示例中， i前进，函数遇到的值将为4 。

for (var i = 0; i < 4; i++) {
    var file = input.files[i];
    var reader = new FileReader();
    reader.onloadend = (function (file) {
        return function () {
            if (i == 0) { //actually, i will be 4
            }
        }
    })(file)
}

• 一些HTML错误。
• 内联事件处理程序的使用。 我不建议使用那些。
• 业务逻辑和UI紧密耦合。 我建议创建一个保存图像元数据和状态的对象，并让其根据其状态构造UI。 这是一个更强大的体系结构。

我花了一些时间解决一些问题。 你可以在这里找到我的版本。 我希望您发现它有用并从中学到东西。

Answer 2

1）这些行将永远不会到达，因为if(i == 0) then input.files.length == 1返回true，因此无论何时转到else节（以上2行）， i实际上都大于0。

2）我认为问题在于您正在创建共享相同ID（img和按钮）的多个元素。 ID必须是唯一的。

Answer 3

嘿，我相信我看到了你的问题。 您正在循环使用FileReader对象中的onloadend事件。 这是一个异步函数，也就是说JavaScript在进入循环的下一个迭代之前不会等待该函数执行。 因此，您的某些逻辑取决于所讨论图像的onloadend函数已经执行，但是在您当前的设置中，这是不可靠的，i var可能已经指向了循环的下一个迭代，但是onloadend函数可能仍然是执行上一个循环并使用错误的i值。 这也会弄乱您其余的逻辑。 至于问题b），我没有完全深入研究这一问题，但是我注意到您在循环内为此声明了click事件，因此某些图像中附加了该事件的多个实例。 我的建议是，等待所有图像加载完毕，然后注入任何其他HTML，然后设置所需的任何事件（即click事件）。 我敢打赌，如果您这样做，问题b）会自行解决:)