0

Al momento de agregar un formulario dinamico con un boton (+) no me deja previsualizar la imagen cargada en el siguiente input file.

Necesito crear una seccion para generar formulario de encuenta, el requisito es que pueda agregar preguntas de seleccion multiple con una imagen

El formulario de crear cuestionario, lleva un input file para cargar la imagen, en la parte inferior va un boton + para agregar mas campos de preguntas, pero esos que se generan mediante un script no me permite visualizar la imagen que cargue

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="preguntas" style="margin: 1rem 0;">
        <div class="form-row preguntas">
    <input type="file" id="files" />  <img id="image" />

  <div id="inserted_item_data"></div>
    <div align="right">
        <button type="button" name="add" id="add" class="btn btn-success btn-xs">+</button>
    </div>
</div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
        $(document).ready(function() {
            var count = 1;
            $('#add').click(function() {
                count = count + 1;
    var html_code = " <div class='form-row' id='row" + count + "'>";
             html_code +='<input type="file" id="files2" />  <img id="image2" />';
    html_code += "</div>";

                $('#preguntas').append(html_code);
            });

            $(document).on('click', '.remove', function() {
                var delete_row = $(this).data("row");
                $('#' + delete_row).remove();
            });


        });
    </script>



    <script type="text/javascript">
    document.getElementById("files").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
    // get loaded data and render thumbnail.
    document.getElementById("image").src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
    };
    </script>



    <script type="text/javascript">
    document.getElementById("files2").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
    // get loaded data and render thumbnail.
    document.getElementById("image2").src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
    };
    </script>
  </body>
</html> ``` 

[![introducir la descripción de la imagen aquí][1]][1]


  [1]: https://i.sstatic.net/1e30q.png
2
  • 1
    Al cargar la página, intentas obtener un elemento que todavía no existe, por lo que document.getElementById("files2").onchange ... seguramente te está generando un error, revisa la consola del navegador para verlo. Además, suponiendo que funcione, por estar asignando ID solo va a servir para el primer elemento agregado. Te sugiero usar clases y "delegar el evento" como se explica en esta respuesta
    – Triby
    Commented el 4 feb. 2022 a las 16:10
  • Lo pude solucionar mediante esta respuesta: es.stackoverflow.com/a/323730 Commented el 4 feb. 2022 a las 21:21

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.