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

Maybe this will help you stackoverflow.com/questions/23402187/… — Yalcin Kilic
– Yalcin Kilic, Commented Jan 26, 2021 at 13:47

Scriptkiddy1337 · Accepted Answer · 2021-01-26 13:46:48Z

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>

answered Jan 26, 2021 at 13:46

Scriptkiddy1337

7915 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kswang · Accepted Answer · 2021-01-26 13:46:40Z

0

You need to iterate through input.files. For each file, create a new <img> tag and append it to your page.
html

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

javascript

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

answered Jan 26, 2021 at 13:46

kswang

15810 bronze badges

Collectives™ on Stack Overflow

How to display multiple input file in javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related