This will select the targeted files and cycles through selected files and stops on the last file. How can the images be displayed without being over written?
//Function below is in the DOM area
function showDirectory(){
var myFiles = document.getElementById("files");
for(var i=0;i<=myFiles.files.length; i++){
var x = myFiles.files[i].name;
document.getElementById("demo1").src= x;
}
}
//This is in a div in the body
<input type="file" id="files" name="files[]" multiple/>
<button onclick="showDirectory();">Show files in the Directory</button>
<img id="demo1" src="" style="width: 40px; height: 40px;"><br>
The syntax document.createElement() is used to actually create new DOM elements, so that you don't have to override old ones. In your case, replace document.getElementById("demo1").src= x; with
let e = document.createElement("img");
e.src = x;
document.getElementById("demo1").appendChild(e);
This code will create a new DOM element of type image, it will set its source to whatever your for loop outputs, and then it will append the img to the div that you have created.