1

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>

1 respuesta 1

0

El truco es ascender donde el primer padre que contiene todo y luego buscar los elementos en cuestión (solo los hijos), en tu caso lo que contenga la clase .preview

document.querySelectorAll(".foto-input").forEach(e=> e.addEventListener("change", preview));

function preview(ev) {
    const fileInput = ev.target;
    const file = fileInput.files[0];
    const reader  = new FileReader();
    reader.onload = function(e)  {
        const image = fileInput.parentElement.querySelector(".preview"); //buscamos el padre y desde ahí a ".preview"
        image.src = e.target.result;
     }
     reader.readAsDataURL(file);
 }
<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>

Con jQuery:

$(".foto-input").on("change", preview);

function preview(ev) {
    const fileInput = ev.target;
    const file = fileInput.files[0];
    const reader  = new FileReader();
    reader.onload = function(e)  {
        const image = $(fileInput).parent().find(".preview"); //buscamos el padre y desde ahí a ".preview"
        $(image).attr("src", e.target.result);
     }
     reader.readAsDataURL(file);
 }
<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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.