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.
$('#imagen' + i).change(function(x) {