從輸入到多個div的多個圖像預覽

Question

如何將多個圖像從輸入上傳到不同的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的

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 Id作爲設置爲屬性爲輸入圖像標記並將圖像值添加到div設置div的值之前。

感謝