me encontré con una pregunta relacionada a lo que estoy haciendo que es la vista previa de múltiples imágenes:
$(document).ready(function(){
$('#btn_add').click(function(){
$('#modal').html('<label>Selecciona las imagenes</label><br><input type="file" id="fl_img" name="fl_img" multiple><div id="resto_form"></div>');
});
$(document).on('change','#fl_img',function(e){
var input =document.getElementById('fl_img');
var cantidad =input.files.length;
//con esto valido que no tenga una extension aparte de jpg y png
for (var i = 0; i < cantidad; i++)
{
var nombre = input.files[i].name;
var ext = nombre.substring(nombre.lastIndexOf("."));
if (ext != ".png" && ext != ".jpg")
{
var valida = false;
break;
}
else
{
var valida = true;
}
}
//aqui se checa que todos tengan una extension valida
if (valida)
{
//limpio el area del form
$('#forms_img').html('');
//genero el campo del nombre y los separo por un id con el numero de imagen
for (var i = 0; i < cantidad; i++)
{
$('#resto_form').append('<div id="img'+i+'"> <h3>Imagen Cargada '+(i+1)+'</h3> <label>Nombre:</label> <input type="text" id="txt_nombre_img'+i+'" name="txt_nombre_img'+i+'" maxlength="30"></div><br><br>');
//con esta funcion deberia encargarse de la pre vista
previsualizarImg(e, i);
}
}
else
{
//en caso de que no sean validos las extensiones manda alert y limpio el file
alert('este archivo no es valido o no se ha seleccionado archvio');
$('#fl_img').val('');
}
});
});
//esta es la funcion previsualizacion
function previsualizarImg(e,i)
{
var file = e.target.files[i];
var reader = new FileReader();
reader.onload = function(e){
var result = e.target.result;
$('#img'+i).append(`<img src="${result}" width="450" height="300">`); //Asignamos el src dinámicamente a un img dinámico también
}
reader.readAsDataURL(file);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Presiona para agregar:</label>
<input type="button" id="btn_add" value="ADD">
<!--lo pongo asi para simular el modal y el agregar los elementos dinamincamente-->
<div id="modal">
</div>
Pero también ocupo el poder eliminar la imagen y su previsualización, esto en caso de equivocarme al elegir la imagen, ¿ como podría lograr esto con JavaScript ?
Este código me permite previsualizar la imagen pero en caso de dar clik dos veces para agregar mas imágenes se sobrescriben:
Por ejemplo aquí aparece dos veces imagen 1, cuando se debería reemplazar por la nueva opcion seleccionada, aparte de poder eliminarlas, les agradecería sus ideas para poder resolverlo gracias