Question

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

我有以下问题：

A）第63-77行的代码似乎被忽略了，虽然当我在第25行打印“i”的值时，我可以看到它正在增加（我怀疑它必须与窗口的性质有关） .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。这是一个更强大的架构。

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

Answer 2

1）这些行永远不会到达，因为if(i == 0)然后input.files.length == 1返回true，所以无论何时进入else部分（上面2行）i实际上都大于0。 / p>

2）我认为问题是你要创建多个共享相同ID的元素（img和button）。 Id必须是唯一的。

Answer 3

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

未设置默认图像

3 个答案: