Esto seleccionará los archivos de destino y recorrerá los archivos seleccionados y se detendrá en el último archivo. ¿Cómo se pueden mostrar las imágenes sin que se sobrescriban?
//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>La sintaxis document.createElement() se usa para crear realmente nuevos elementos DOM, de modo que no tenga que anular los antiguos. En su caso, reemplace document.getElementById("demo1").src= x; con
let e = document.createElement("img"); e.src = x; document.getElementById("demo1").appendChild(e);Este código creará un nuevo elemento DOM de tipo imagen, establecerá su fuente en cualquiera de sus salidas de bucle for y luego agregará el img al div que ha creado.