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

0

if(i == 0)1) theninput.files.length == 1が true を返し、else セクション (上記の 2 行) に移動するたびに、i実際には 0 より大きいため、これらの行は決して到達しません。

2) 問題は、同じ ID (img とボタン) を共有する複数の要素を作成していることだと思います。ID は一意である必要があります。

于 2013-07-29T00:47:44.967 に答える
0

やあ、私はあなたの問題を見たと思います。ループ内で FileReader オブジェクトの onloadend イベントを使用しています。これは非同期関数です。つまり、JavaScript はこの関数が実行されるのを待たずに、ループの次の反復に進みます。そのようなロジックの一部は、問題の画像に対して既に実行されている onloadend 関数に依存しているため、現在の設定ではこれは信頼できません。i var はループの次の反復を既に指している可能性がありますが、onloadend 関数はまだ前のループで実行し、間違った i 値を使用しています。これにより、残りのロジックも台無しになります。問題b)に関しては、私はこれを完全に掘り下げませんでしたが、ループ内でこれのクリックイベントを宣言したことに気付きました。そのため、一部の画像には、このイベントの複数のインスタンスが添付されていました。私のアドバイスは、すべての画像が読み込まれるのを待ってから、余分な HTML を挿入してから、必要なイベント (つまり、クリック イベント) をセットアップすることです。これを行うと、問題b）が自動的に解決されるに違いありません:)

于 2013-07-29T00:56:57.280 に答える