Quiero subir varias imágenes y mostrarlas en la página web. El siguiente es el código que he hecho ->

 let fileInput = document.getElementById("file-input"); let imageContainer = document.getElementById("images-space"); let numOfFiles = document.getElementById("num-of-files"); function preview(){ imageContainer.innerHTML = ""; numOfFiles.textContent = `${fileInput.files.length} Files Selected`; $("#images_2nd_div_heading").html('<p><b>You have Selected ' + `${fileInput.files.length}` + ' Images.</b> (Click on the images to add Tags)</p>'); var count = 1; var html2=''; for(i of fileInput.files){ let reader = new FileReader(); let figure = document.createElement("figure"); let figCap = document.createElement("figcaption"); figCap.innerText = i.name; figure.appendChild(figCap); reader.onload=()=>{ let img = document.createElement("img"); img.setAttribute("src",reader.result); img.setAttribute("name","img"+count); figure.insertBefore(img,figCap); } imageContainer.appendChild(figure); reader.readAsDataURL(i); }

Ahora las imágenes se cargan perfectamente en la página web. El único problema es que el img.setAttribute utilizado para el nombre está configurando "name":img4 si selecciono 3 imágenes de la página web.

No sé por qué está sucediendo.

Aquí está el código HTML ->

 <div class="container1"> <input type="file" id="file-input" name="file" accept="image/png, image/jpeg" onchange="preview()" oninput="this.className = ''" multiple> <label for="file-input"> <i class="fa fa-upload choose_photo"></i> &nbsp; Choose Your Photos </label> <p id="num-of-files"> No Files Chosen </p> <div id="images-space"></div> </div> </div>