1

tengo un problema al querer generar un id dinamico para mis input de un formulario...

    $(function() {
  $('#imagen1').change(function(x) {
      addImage(x); 
     });
     function addImage(x){
      var file = x.target.files[0],
      imageType = /image.*/;

      if (!file.type.match(imageType))
       return;

      var reader = new FileReader();
      reader.onload = fileOnload;
      reader.readAsDataURL(file);
     }
     function fileOnload(x) {
      var result=x.target.result;
      $('#imagen1salida').attr("src",result);
     }
  });

lo que yo quiero hacer es que esta funcion de previzualizacion de imagenes se ejecute 10 veces pero con ids diferentes, por ejemplo $('#imagen2'), $('#imagen3'), $('#imagen4'). Basicamente lo que quiero es hacer un for que me genere esos numeros que van despues de la imagen, que seria algo asi $('#imagen'+variable+''); para no tener que copiar esa funcion 10 veces.

Probe de esta forma pero no me funciona:

 var numero = "";
var i;
for (i = 1; i < 11; i++) {
  numero += i;
  prueba = numero;
 $(function() {
  $('#imagen'+prueba+'').change(function(x) {
      addImage(x); 
     });
     function addImage(x){
      var file = x.target.files[0],
      imageType = /image.*/;

      if (!file.type.match(imageType))
       return;

      var reader = new FileReader();
      reader.onload = fileOnload;
      reader.readAsDataURL(file);
     }
     function fileOnload(x) {
      var result=x.target.result;
      $('#imagen'+prueba+'salida').attr("src",result);
     }
  });
}

este es el formulario, estoy trabajando con Laravel por cierto.

<div class="form-group">
                <label for="imagen1">Pregunta 1</label>
                <input type="text" class="form-control" value="{{$encuesta->opcion1}}">
                <input id="imagen1" type="file" name="imagen1" value="{{asset('imagenes/encuestas/'.$encuesta->imagen1)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: none;">
                <br>
                <label for="imagen1">
                    <img id="imagen1salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen1)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
            </div>
            <div class="form-group">
                <label for="imagen2">Pregunta 2</label>
                <input type="text" class="form-control" value="{{$encuesta->opcion2}}">
                <input id="imagen2" type="file" name="imagen2" value="{{asset('imagenes/encuestas/'.$encuesta->imagen2)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: none;">
                <br>
                <label for="imagen2">
                    <img id="imagen2salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen2)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
            </div>
            <div class="form-group">
                <label for="imagen3">Pregunta 3</label>
                <input type="text" class="form-control" value="{{$encuesta->opcion3}}">
                <input id="imagen3" type="file" name="imagen3" value="{{asset('imagenes/encuestas/'.$encuesta->imagen3)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: none;">
                <br>
                <label for="imagen3">
                    <img id="imagen3salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen3)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
            </div>
            <div class="form-group">
                <label for="imagen4">Pregunta 4</label>
                <input type="text" class="form-control" value="{{$encuesta->opcion4}}">
                <input id="imagen4" type="file" name="imagen4" value="{{asset('imagenes/encuestas/'.$encuesta->imagen4)}}" class="form-control" accept="image/jpeg, image/png, Image/bmp" style="display: none;">
                <br>
                <label for="imagen4">
                    <img id="imagen4salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen4)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
            </div>
            <div class="form-group">
                <label for="imagen5">Pregunta 5</label>
                <input type="text" class="form-control" value="{{$encuesta->opcion5}}">
                <input id="imagen5" type="file" name="imagen5" value="{{asset('imagenes/encuestas/'.$encuesta->imagen5)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: none;">
                <br>
                <label for="imagen5">
                    <img id="imagen5salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen5)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="imagen6">Pregunta 6</label>
                <input type="text" class="form-control" value="{{$encuesta->opcion6}}">
                <input id="imagen6" type="file" name="imagen6" value="{{asset('imagenes/encuestas/'.$encuesta->imagen6)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: none;">
                <br>
                <label for="imagen6">
                    <img id="imagen6salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen6)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
            </div>
            <div class="form-group">
                <label for="imagen7">Pregunta 7</label>
                <input type="text" class="form-control" value="{{$encuesta->opcion7}}">
                <input id="imagen7" type="file" name="imagen7" value="{{asset('imagenes/encuestas/'.$encuesta->imagen7)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: none;">
                <br>
                <label for="imagen7">
                    <img id="imagen7salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen7)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
            </div>
            <div class="form-group">
                <label for="imagen8">Pregunta 8</label>
                <input type="text" class="form-control" value="{{$encuesta->opcion8}}">
                <input id="imagen8" type="file" name="imagen8" value="{{asset('imagenes/encuestas/'.$encuesta->imagen8)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: none;">
                <br>
                <label for="imagen8">
                    <img id="imagen8salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen8)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
            </div>
            <div class="form-group">
                <label for="imagen9">Pregunta 9</label>
                <input type="text" class="form-control" value="{{$encuesta->opcion9}}">
                <input id="imagen9" type="file" name="imagen9" value="{{asset('imagenes/encuestas/'.$encuesta->imagen9)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: none;">
                <br>
                <label for="imagen9">
                    <img id="imagen9salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen9)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
            </div>
            <div class="form-group">
                <label for="imagen10">Pregunta 10</label>
                <input type="text" class="form-control" value="{{$encuesta->opcion10}}">
                <input id="imagen10" type="file" name="imagen10" value="{{asset('imagenes/encuestas/'.$encuesta->imagen10)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: none;">
                <br>
                <label for="imagen10">
                    <img id="imagen10salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen10)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
            </div>

Espero y se entienda mi pregunta.. desde ya muchas gracias.

4
  • Intenta esto: $('#imagen' + i).change(function(x) {
    – alanfcm
    Commented el 29 ago. 2018 a las 18:00
  • ya lo intente y no me funciono.. :/ Commented el 29 ago. 2018 a las 18:07
  • Puedes subir tu HTML para poder ayudarte? Commented el 29 ago. 2018 a las 18:09
  • ya lo subi Hugo.. Commented el 29 ago. 2018 a las 18:12

2 respuestas 2

1

Hay varias cuestiones aquí, fijate el javascript los id que está generando:

var numero = "";
var i;
for (i = 1; i < 11; i++) {
  numero += i;
  prueba = numero;
 $(function() {
  console.log("prueba:",prueba);
  $('#imagen'+prueba+'').change(function(x) {
      addImage(x); 
     });
     function addImage(x){
      var file = x.target.files[0],
      imageType = /image.*/;

      if (!file.type.match(imageType))
       return;

      var reader = new FileReader();
      reader.onload = fileOnload;
      reader.readAsDataURL(file);
     }
     function fileOnload(x) {
      var result=x.target.result;
      $('#imagen'+prueba+'salida').attr("src",result);
     }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1) numero es una cadena así que al agregarle i se va convirtiendo en 1, 12 ... 123456789, 12345678910.

2) Al poner $(function() { dentro de un for estás agregando eventos al documentready que se van a ejecutar todos juntos cuando cargue la página.

3) Las variables en javascript son referencias a un objeto en memoria, así que al cambiar numero y asignarlo a prueba cuando realmente se ejecuten los $('#imagen'+prueba+'').change(function(x) { van a tener todos el mismo id: #imagen12345678910.

4) Algo parecido sucede al querer usar prueba para buscar la imagen correspondiente a cada input file, hay que capturar el id de cada input file y pasarselo a cada uno de los readers que se crean (asi cada reader sabe a que imagen cambiarle el src)


Un código adaptado a evitar estas cosas sería algo así:

var i;
// sacamos las funciones hacia afuera del docready
function addImage(x) {
  var file = x.target.files[0],
    imageType = /image.*/;

  if (!file.type.match(imageType))
    return;

  var reader = new FileReader();
  // guardamos el ID del input[file] dentro de cada reader
  reader.elId = x.target.id;
  reader.onload = function(x) {
    var result = x.target.result;
    // recuperamos el ID y apuntamos a la img
    $('#' + x.target.elId + 'salida').attr("src", result);
  };
  reader.readAsDataURL(file);
}

// una sola funcion docready
$(function() {
  for (i = 1; i < 11; i++) {
    var selector = '#imagen' + i;
    console.log("selector:", selector);
    $(selector).change(function(x) {
      addImage(x);
    });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


Por otro lado y debido a que los ID en tu código siempre son de un input de tipo file, podés resumir un poco sin tener que generar las ID, algo así:

var i;
// sacamos las funciones hacia afuera del docready
function addImage(x) {
  var file = x.target.files[0],
    imageType = /image.*/;

  if (!file.type.match(imageType))
    return;

  var reader = new FileReader();
  // guardamos el ID del input[file] dentro de cada reader
  reader.elId = x.target.id;
  reader.onload = function(x) {
    var result = x.target.result;
    // recuperamos el ID y apuntamos a la img
    $('#' + x.target.elId + 'salida').attr("src", result);
  };
  reader.readAsDataURL(file);
}


// una sola funcion docready
$(function() {
  // un solo selector para todos
  $('input[type="file"]').change(function(x) {
    addImage(x);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="imagen7">Pregunta 7</label>
  <input type="text" class="form-control" value="{{$encuesta->opcion7}}">
  <input id="imagen7" type="file" name="imagen7" value="{{asset('imagenes/encuestas/'.$encuesta->imagen7)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: block;">
  <br>
  <label for="imagen7">
                    <img id="imagen7salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen7)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
</div>
<div class="form-group">
  <label for="imagen8">Pregunta 8</label>
  <input type="text" class="form-control" value="{{$encuesta->opcion8}}">
  <input id="imagen8" type="file" name="imagen8" value="{{asset('imagenes/encuestas/'.$encuesta->imagen8)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: block;">
  <br>
  <label for="imagen8">
                    <img id="imagen8salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen8)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
</div>
<div class="form-group">
  <label for="imagen9">Pregunta 9</label>
  <input type="text" class="form-control" value="{{$encuesta->opcion9}}">
  <input id="imagen9" type="file" name="imagen9" value="{{asset('imagenes/encuestas/'.$encuesta->imagen9)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: block;">
  <br>
  <label for="imagen9">
                    <img id="imagen9salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen9)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
</div>
<div class="form-group">
  <label for="imagen10">Pregunta 10</label>
  <input type="text" class="form-control" value="{{$encuesta->opcion10}}">
  <input id="imagen10" type="file" name="imagen10" value="{{asset('imagenes/encuestas/'.$encuesta->imagen10)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: none;">
  <br>
  <label for="imagen10">
                    <img id="imagen10salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen10)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
</div>

1
  • Muchisimas gracias por tu respuesta.. me fue de gran ayuda.. Solucionado! Commented el 29 ago. 2018 a las 18:55
0

Estás teniendo un par de problemas, el $(function() { }) tiene que envolver todo el script, vos lo estás creando en cada ciclo for. Y cuando utilizás la variable prueba en $('#imagen'+prueba+'') estás teniendo un error ya que eso devuelve un string vacío, entonces no te agrega el método change().

Deberías cambiar eso y ya quedaría utilizando $('#imagen'+ i).

$(function() {
  function addImage(ev, i) {
    var file = ev.target.files[0],
    imageType = /image.*/;

    if (!file.type.match(imageType))
    return;

    var reader = new FileReader();
    reader.onload = function(e) {
      var result = e.target.result;
      $('#imagen'+i+'salida').attr("src",result);
    };
    reader.readAsDataURL(file);
  }
  for (var i = 1; i < 11; i++) {
    $('#imagen'+ i).change(function(event) {
      addImage(event, i);
    });
  }
});
7
  • Entiendo. ya lo intente de esa manera, pero cuando lo hago asi solo me hace la previzualizacion de la primera imagen del formulario, pero cuando meto el $(function() { dentro del for no cambia ni una imagen Commented el 29 ago. 2018 a las 18:32
  • Te muestra algún error? Es probable que las funciones deban estar por fuera, ya que estás re declarando algo ya existente y genere un conflicto.
    – Kleith
    Commented el 29 ago. 2018 a las 18:35
  • la consola esta limpia.. voy a seguir probando Commented el 29 ago. 2018 a las 18:36
  • @HernanChaparro Prueba con el siguiente cambio que he realizado.
    – Kleith
    Commented el 29 ago. 2018 a las 18:43
  • no me funciono @keith, mismos sintomas, no cambia la imagen y la consola sigue limpia.. Commented el 29 ago. 2018 a las 18:51

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.