Estoy realizando un modulo donde se suben imágenes de manera múltiple sin embargo estas imágenes van acompañadas de un nombre en la BD, y para esto estoy generando un campo de texto con la una imagen abajo de este para que el usuario escriba el nombre de la imagen pero de los ejemplos que he buscado en Internet solo he encontrado pre visualizar una imagen y yo requiero que sea varias...
intente adaptar ese código para que lo realizara adecuadamente pero sin embargo no logro que muestre otra imagen aparte de la primera seleccionada
aquí un ejemplo de lo que he intentado:
$(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)
{
$('#img'+i).append('<img src="" width="450" height="300">');
var file = e.target.files[i];
var reader = new FileReader();
reader.onload = function(e){
var result = e.target.result;
$('#img0 > img').attr("src",result);
}
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>