は私がやりたい入力

Question

をクリックしたときに画像を追加します。

• プラス記号をクリックした後、画像を挿入代わりのプラス
• は、新しいを作成するプラス後の追加画像

マイcodepenデモをサイン： CodePen

function readImage(input) { 
    if (input.files && input.files[0]) { 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
     $('.cert img').attr('src', e.target.result); 
     $('.cert label').css('opacity', '0'); 
    } 
    reader.readAsDataURL(input.files[0]); 
    } 
} 

Answer 1

これは非常に完璧ではないですが、それはWOR ksは複数のイメージを読み込み、重複したIDをクリーンアップします。あなたのCodePen JSボックスでそれを試すことができます。

function readImage(input, element) { 
    if (input.files && input.files[0]) { 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
     $(element).find("img").attr("src", e.target.result); 
    }; 
    reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#certImg0").change(function() { 
    var element = $(this) 
    .parent() 
    .clone(); 
    $(element).find('input').remove(); 
    $(element).find('label').remove(); 
    element.insertAfter($(this).parent()); 
    readImage(this, element); 
}); 

これの目的は、生成された要素を取り、readImage機能に作成された実際の要素を渡すことで、ロードされた新しいイメージがそのままです新しいdiv構造体のimg要素に格納されます。

（これは、img要素でdivのみを生成するように最適化することができ、新しい画像をクリックできないようにすることができます）実際には、入力とラベルの削除