如何在javascript中显示多个输入文件

我遇到一个问题，无法在表单中显示多个输入文件。我想显示多个输入文件，如何才能做到这一点

见此：

在第二个框中，我想显示我的其他图像

注意：它只处理一个图像，但我想显示多个图像

请帮忙

index.html

---

您需要遍历input.xml文件。对于每个文件，创建一个新标记并将其附加到页面。 html

javascript

也许这对你有帮助

 <label for="diposite"><b>Photos</b></label>
      <input type='file' onchange="readURL(this);" multiple/>
      <img id="blah" src="https://i.ibb.co/42x6mCS/image.jpg" alt="your image" />

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

    reader.onload = function (e) {
      $('#blah')
        .attr('src', e.target.result);
    };
    reader.readAsDataURL(input.files[0]);
  }
}

<label for="diposite"><b>Photos</b></label>
<input type='file' onchange="readURL(this);" multiple/>
<div class="images"></div>

function readURL(input) {
    if (input.files) {
        for(let i=0; i<input.files.length; i++) {
            var reader = new FileReader();

            reader.onload = function (e) {
                let img = $('<img>').attr('src', e.target.result);
                $('.images').append(img)
            };
            reader.readAsDataURL(input.files[i]);
        }
    }
}

<script>
    function readURL(input) {
        if (!input.files) {
            return;
        }
        const readers = [];
        const bean = document.getElementById('bean');
        for (let i = 0; i < input.files.length; i++) {
            readers.push(new FileReader());
            readers[i].onload = function(e) {
                const img = new Image();
                img.src = e.target.result;
                bean.appendChild(img);
            };
            readers[i].readAsDataURL(input.files[i]);
        }
    }
</script>
<label for="diposite"><b>Photos</b></label>
<input type='file' onchange="readURL(this);" multiple/>
<div id="bean"></div>