html - How to display multiple input file in javascript

Question

I am stuck with a problem, I am not able to display multiple input files in my form. I want to display multiple input files, how can I do that?

See this:

In there the 2nd box I want to display my other image.

Note: its working on a single image but I want to display multiple images

Please help.

index.html

 <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" />

index.js

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]);
  }
}

question from:https://stackoverflow.com/questions/65902346/how-to-display-multiple-input-file-in-javascript

Answer 1

<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>