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 am之前设置值格。

谢谢

从输入到不同div的多个图像预览

1 个答案: