javascript - 从输入到不同 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 指定为 输入图像标签 的 set-to 属性，并且在将图像值添加到 div 之前，我设置了分区。

谢谢