このプレースホルダーの代わりに画像をアップロードするには、imgプレースホルダーをクリックしてください。

Question

以下のコードは詩からは離れており、私は初心者です。これを念頭に置いて、私は<form>内のHTMLを次ています

<div class="image-upload"> 
<img id="send_photo_img1" src="assets/images/index2.png"/> 
<input id="send_photo_input1" type="file"/> 
<img id="send_photo_img2" src="assets/images/index2.png"/> 
<input id="send_photo_input2" type="file"/> 
</div> 

目標：ユーザーが画像（「+」記号の付いたプレースホルダですindex2.pngを）クリックすると、ウィンドウは、入力=ファイルからのように開きますユーザーはimgを選択し、プレースホルダーの代わりに読み込まれます。

残りのコード：

のjQuery（@Ivan Bayevのanswer hereに基づいて、それはとても良い、鉱山はかなり不器用な気圧を得た彼のコードながら...）

function readURL(input) { 

if (input.files && input.files[0]) { 
    var reader = new FileReader(); 

    reader.onload = function (e) { 
     $('#send_photo_img1').attr('src', e.target.result); 
    } 

    reader.readAsDataURL(input.files[0]); 
} 
} 

$("#send_photo_img1").click(function(){ 
    $("#send_photo_input1").trigger("click"); 
    $("#send_photo_input1").change(function(){ 
     readURL(this); 
    });   
}); 

CSS

.image-upload > input 
{ 
    display: none; 
} 

これは機能します。しかし、（1）jQueryが本当に悪い、（2）最大の懸念 - プレースホルダの代わりに画像が表示されたら、私はまだ30〜40秒のような "ロード"サインを持っています。その後、それはなくなった。

アドバイスは非常に簡単です。ありがとう！

Answer 1

誰でも上記の解決策に興味がある場合は、こちらをご覧ください。

最初に上記のコードがIDに添付されていますが、input = fileのインスタンスが多く1ページにあると悪くなります。だから最初にこれをクラスに付け直してください。各ブロックは次のようになります。

<div class="img_upload"> 
<img class="send_photo_img" src="assets/images/index2.png"/> 
<input class="send_photo_input" type="file"/> 
</div> 

そして、それはjQueryを介して、それを選択するために、いくつかの回避策を取る：

$(".img_upload img").click(function(){ 
    var imgDiv = $(this).next(".send_photo_input"); 
    imgDiv.trigger("click"); 
    imgDiv.change(function(){ 
     //console.log('Display that to trace results'); 
     //your function here. 
    }); 
}); 

CSS：私の質問で

.img_upload input 
{ 
    display: none; // hide original input 
} 
.img_upload img 
{ 
    width: 90px; 
    height: 90px; 
    cursor: pointer; 
} 

ReadURL機能は、実際に、完璧に動作しますこれを変更してください：

reader.onload = function (e) { 
    $('#send_photo_img1').attr('src', e.target.result); 
} 

これに

：

reader.onload = function (e) { 
    $(input).prev(".send_photo_img").attr('src', e.target.result); 
} 

そして、あなたは、より一般的な使用することができながら、私はprev()を使用することに注意してください：あなたはより良い効果のための代わりのimgのアイコンを使用することができます

$(input).parent().find(".send_photo_img").attr('src', e.target.result); 

注意を。

この回答は、あなたに上記の質問のための作業コードのアイデアを与えることです。必要に応じて他の詳細をお気軽にお尋ねください。