Aquí tengo la funcionalidad de carga múltiple de imágenes.
Así que aquí, si el usuario selecciona Múltiples imágenes, usando el siguiente código JavaScript podemos cargar varias imágenes.
Pero aquí quiero mejorar la funcionalidad y las imágenes cargadas deben tener un ícono de cruz como cerrar la imagen si el usuario no desea cargar la imagen específica, podrá eliminar o eliminar la imagen deseada, no toda la imagen que la imagen no es el buen usuario que puede eliminar esa imagen.
Entonces, por favor, ayúdame, ¿cómo podemos lograr esto?
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); } }; <input required name="images" type="file" multiple class="form-control-file" onchange="loadFile(event)"> <p class="cont"></p> <!DOCTYPE html> <html> <body> <input required name="images" type="file" multiple class="form-control-file" onchange="loadFile(event)"> <div id="cont"></div> <body> <script> var loadFile = function(event) { var imgCont = document.getElementById("cont"); for (let i = 0; i < event.target.files.length; i++) { var divElm = document.createElement('div'); divElm.id = "rowdiv" + i; var spanElm = document.createElement('span'); var image = document.createElement('img'); image.src = URL.createObjectURL(event.target.files[i]); image.id = "output" + i; image.width = "200"; spanElm.appendChild(image); var deleteImg = document.createElement('p'); deleteImg.innerHTML = "x"; deleteImg.onclick = function() {this.parentNode.remove()}; divElm.appendChild(spanElm); divElm.appendChild(deleteImg); imgCont.appendChild(divElm); } }; </script> </html>