0

我正在使用 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）如果您添加多个图像并出于某种原因按“设置为默认值”，这似乎不适用于最后一张图像，但不知道为什么。

谢谢

4

3 回答 3

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。这是一个更健壮的架构。

我花了一些时间来解决一些问题。你可以在这里找到我的版本。我希望你觉得它有用并从中学习。

于 2013-07-29T02:10:49.710 回答
0

1）这些行永远不会到达，因为if(i == 0)theninput.files.length == 1返回 true ，所以每当它进入 else 部分（上面的 2 行）i实际上大于 0。

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

于 2013-07-29T00:47:44.967 回答
0

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

于 2013-07-29T00:56:57.280 回答