入力から複数のdivへの複数画像のプレビュー

Question

入力から複数の画像を別々のdivにアップロードするにはどうすればよいですか？だから、

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

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

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

$(".img").change(function(){ 
    readURL(this); 
}); 

Answer 1

function readURL(input) { 
 
    if (input.files && input.files[0]) { 
 
     var reader = new FileReader(); 
 
     var div_id = $(input).attr('set-to'); 
 
     reader.onload = function (e) { 
 
      $('#'+div_id).attr('src', e.target.result); 
 
     } 
 

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

 
$(".img").change(function(){ 
 
    readURL(this); 
 
});

img{ 
 
    height : 50px; 
 
    width: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form" runat="server"> 
 
    <input type='file' class="img" set-to="div1" /> 
 
    <input type='file' class="img" set-to="div2" /> 
 
    <input type='file' class="img" set-to="div3" /> 
 
</form> 
 

 
<div> 
 
    <img class="image" id="div1" src="#" alt="image 1" /> 
 
</div> 
 
<div> 
 
    <img class="image" id="div2" src="#" alt="image 2" /> 
 
</div> 
 
<div> 
 
    <img class="image" id="div3" src="#" alt="image 3" /> 
 
</div>

このコードは役立つかもしれないか確認してくださいユーザーが自分のコンピュータから画像をアップロードすることができ、彼らは別のdivを

HTML

<form id="form" runat="server"> 
    <input type='file' class="img" /> 
    <input type='file' class="img" /> 
    <input type='file' class="img" /> 
</form> 

<div> 
    <img class="image" src="#" alt="image 1" /> 
</div> 
<div> 
    <img class="image" src="#" alt="image 2" /> 
</div> 
<div> 
    <img class="image" src="#" alt="image 3" /> 
</div> 

jqueryのに表示されますあなたは出て行く。 私はセットに属性入力画像タグのためとのdivに画像値を追加する前には、div要素の値を設定していますとして本部同上を与えています。

おかげ