Question

我想在我的html页面上显示我的多输入图像

这是我的输入代码

<img src="img/package_thumbnail.png" class="myAvatar">
<img id="blah" src="#" alt="" style="display: inline;" /><br><br>
<input type="file" name="newAvatar" id="newAvatar" style="display: none;" onchange="readURL(this);" required />

<script>
   $(".myAvatar").click(function() {
     $("#newAvatar").trigger("click");
   });
</script>

然后这是我的脚本显示单个图像

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

        reader.onload = function (e) {
            $('#blah')
                .attr('src', e.target.result)
                .width(150)
                .height(200);
        };

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

我想改进它以显示多个图像，任何人都知道该怎么做？

Answer 1

上传新图片时，只需创建dom图片元素的克隆并更新src。

从

更改您的功能

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

        reader.onload = function (e) {
            $('#blah')
                .attr('src', e.target.result)
                .width(150)
                .height(200);
        };

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

要

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

        reader.onload = function (e) {
             $new_img = $('#blah').clone().attr('src', e.target.result).width(150).height(200);
             $new_img.insertAfter($('#blah'));
        };

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

Answer 2

检查下面的代码段。在此，它检查它是否为一个空白src图像然后它将更新该图像的URL，如果它不包含空白url图像意味着它已经包含上传的图像，那么它将克隆该图像并更新URL。我还更新了你的HTML。我刚刚将id =“blah”更改为class =“blah”。因此，在上传多个图片时，它不包含重复的ID。

  $(".myAvatar").click(function() {
     $("#newAvatar").trigger("click");
   });
   
   
   function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            if($("img[src='#']").length == 1)
            {
              $('.blah')
                .attr('src', e.target.result)
                .width(150)
                .height(200);
            }
            else
            {
              $new_img = $('.blah:first').clone().attr('src', e.target.result).width(150).height(200);
              $new_img.insertAfter($('.blah:last'));
            }
        };

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="img/package_thumbnail.png" class="myAvatar">
<img class="blah" src="#" alt="" style="display: inline;" /><br><br>
<input type="file" name="newAvatar" id="newAvatar" style="display: none;" onchange="readURL(this);" required />

显示多个输入图像

2 个答案: