如何显示多个图像？

Question

我的 html 代码是这样的：

<input type='file' multiple/>
<img id="myImg" src="#" alt="your image" />

我的 javascript 代码是这样的：

$(function () {
    $(":file").change(function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
        }
    });
});

function imageIsLoaded(e) {
    $('#myImg').attr('src', e.target.result);
};

演示是这样的：https : //jsfiddle.net/oscar11/ob8aas23/

当我上传一张图片时，它会显示图片

但是当我上传超过 1 张图片时，只显示一张图片

我怎么解决这个问题？

Answer 1

问题是只有一个img标签，但要显示多张图像，则需要相同数量的img标签。因此最好循环遍历files.length并动态创建图像标签并向其添加源

$(function() {
  $(":file").change(function() {
    if (this.files && this.files[0]) {
      for (var i = 0; i < this.files.length; i++) {
        var reader = new FileReader();
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(this.files[i]);
      }
    }
  });
});

function imageIsLoaded(e) {
  $('#myImg').append('<img src=' + e.target.result + '>');
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='file' multiple/>
<div id="myImg">
</div>