This I have implemented in javascript. So in this if user uploads a image it will display the image and also image name. So here presently i am able to upload single image. So how can we upload multiple images in this case if any one have an idea please let me know

<p><input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style=""></p>
<p><img id="output" width="200" /></p> 

<script> 
var loadFile = function(event) { 
    var image = document.getElementById('output'); 
    image.src = URL.createObjectURL(event.target.files[0]); 
    }; 
</script>

CodePudding user response：

You can use multiple attribute on input to accept multiple images, and use a for loop, to iterate over the files, and display each one of them.

var loadFile = function(event) {
  for (let i = 0; i < event.target.files.length; i  ) {
    var image = document.createElement('img');
    image.src = URL.createObjectURL(event.target.files[i]);
    image.id = "output";
    image.width = "200";
    document.querySelector(".cont").appendChild(image);
  }
};

<p><input multiple type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style=""></p>
<p class="cont"></p>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>