Buen día a todos, quería que me ayudaran con algo que quizá pueda ser simple (o no), estoy generando varios div que contienen un input cada uno para que el usuario pueda ingresar una imagen, con eso no tengo problemas, mi problema es que quiero mostrar una preview del archivo subido pero como se generan de forma dinámica no puedo usar el id para asignar la imagen donde debe ir (o eso creo), intento hacerlo usando siblings pero no funciona, al hacer un console.log de lo que se ha ingresado al input la imagen si esta llegando pero al tratar de asignarla a vistaPrevia no se muestra.
Les agradezco cualquier ayuda.
$(document).on('click', '.camara', function() {
var inputFile = $(this).siblings('input[type=file]');
inputFile.click();
});
$(document).on('change', 'input[type=file]', function() {
var archivo = this.files[0];
var vistaPrevia = $(this).siblings('.preview');
var borrarBtn = $(this).siblings('.borrarBtn');
if (archivo) {
var lector = new FileReader();
lector.onload = function(e) {
console.log("Imagen base64: ",e.target.result);
vistaPrevia.attr('src', e.target.result);
vistaPrevia.css('display', 'block');
borrarBtn.show();
};
lector.readAsDataURL(archivo);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="input-group" id="field_wrapper_gondola">
<input class="foto-input" type="file" accept="image/*" capture="camera">
<div style="text-align: center;" class="camara"></div>
<div>
<img class="preview" src="#" alt="Vista previa de la foto">
</div>
<button class="btn btn-danger mt-2 borrarBtn" style="display: none;">Borrar</button>
</div>