未设置默认图像

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

我有以下问题：

A）中的代码行63-77似乎被忽略，虽然当我打印的“i”值在第25行，我可以看到这是在增加（我怀疑它必须与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）如果添加了多张图片，点击“设置为默认”由于某种原因，这似乎并没有为最后的图像，但不知道为什么工作。

感谢

来源

2013-07-28 Athanatos

开始的时候，你的代码是嵌套的，看起来你错过了一些变量作用域，比如你的'onloadend'处理函数中的'i'，这个函数被调用时的最终值'i' 。另外，您多次添加$（“。setDefault：button”）处理程序。如果我是你，我会使用事件委托，以便处理程序只能添加一次到周围的元素。 – MasterAM

你的代码有很多错误的东西。

其中：

一个很长的功能，这是难以阅读和调试的深层嵌套。
变量作用域：当您创建处理程序时，您认为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。这是一个更强大的体系结构。

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

来源

2013-07-29 02:10:49 MasterAM

感谢您对此的详细解释和您花费的时间。现在有道理。 – Athanatos

1）这些线路将永远无法达到，因为if(i == 0)然后input.files.length == 1返回true，所以每当它进入其他部分（2行以上）i实际上是大于0

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

来源

2013-07-29 00:47:44 Samurai

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

来源

2013-07-29 00:56:57 jdog

未设置默认图像

回答

相关问题