JavaScript - cargar imagen según su nombre en un input

Pos: 15

Val: 159

cargar imagen según su nombre en un input

Publicado por Eduardo Arroyo (186 intervenciones) el 29/10/2022 05:49:01

Hola a todos espero estén bien todos.. tengo una consulta y espero me puedan ayudar

cargo en un campo input el nombre de una imagen de una base de datos

<input name="foto" type="text" required="required" id="foto" style="width:70%" autocomplete="off" readonly="readonly" />

como hago para que cuando se cargue alli el nombre de la imagen se muestre en automático la imagen..

<img src="fotos/aquinombredelaimagen.jpg" name="foto" width="139" height="173" id="foto" />

mil gracias----

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 49

Val: 37

cargar imagen según su nombre en un input

Publicado por algoritmo (14 intervenciones) el 29/10/2022 16:02:37

Hola

No puedes tener 2 objetos con el mismo 'id'.
Suponiendo que el input le pones el 'id="input_foto"'

Prueba con:

document.getElementById('foto').src = document.getElementById('input_foto').value

Espero que te sirva :)

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 15

Val: 159

cargar imagen según su nombre en un input

Publicado por Eduardo (186 intervenciones) el 29/10/2022 16:55:36

Mil gracias voy a probar y te voy contando..
Mil Gracias por tu tiempo, paciencia y Ayuda!!!!!

Valora esta respuesta

Comentar

Pos: 15

Val: 159

cargar imagen según su nombre en un input

Publicado por Eduardo (186 intervenciones) el 29/10/2022 18:36:23

he estado intentandolo pero no me resulta

tengo este recuedro donde debe salir la imagen... con id img

<img src="logo.png" width="162" height="73" /></div><img src="imagen/" name="img" width="63" height="72" id="img"/>

tengo el campo identificacion con id identificacion

<input name="identificacion" type="text" required="required" id="identificacion" style="width:70%" autocomplete="off" readonly="readonly" onchange="mostrar()"/>

le puse el disparador onchange="mostrar()" pienso que OnBlur seria mejor pero allí me corriges si me equivoco y cual me recomiendas usar mejor

luego pongo arriba el script que debería hacer la magia incluida la linea que me pasaste...

<script>

function mostrar()

document.getElementById('img')=document.getElementById('identificacion').value;

</script>

Lo pruebo pero no me sirve!!!

que estoy haciendo mal

Ayudaaa!!!

Valora esta respuesta

Comentar

Pos: 15

Val: 159

cargar imagen según su nombre en un input

Publicado por Eduardo (186 intervenciones) el 29/10/2022 18:37:20

disculpa no le active para resaltar este codigo del input

<input name="identificacion" type="text" required="required" id="identificacion" style="width:70%" autocomplete="off" readonly="readonly" onchange="mostrar()"/>

Valora esta respuesta

Comentar

Pos: 49

Val: 37

cargar imagen según su nombre en un input

Publicado por algoritmo (14 intervenciones) el 29/10/2022 20:00:06

Fíjate bien, te falta un '.src'
No puedes ponerle un readonly porque no te permite editarlo.

Código completo y probado:

<html>

    <script type="text/javascript">

        function mostrar(){

            document.getElementById('img').src = document.getElementById('identificacion').value;

    </script>

    <input name="identificacion" type="text" required="required" id="identificacion" style="width:70%" autocomplete="off" onchange="mostrar()"/>

    <img src="" name="img" width="63" height="72" id="img"/>

</html>

Valora esta respuesta

Comentar

Pos: 15

Val: 159

cargar imagen según su nombre en un input

Publicado por Eduardo (186 intervenciones) el 29/10/2022 20:30:29

Maravilloso funciona perfecto pero al pasarlo en mi ejemplo no se por que no me funciona...

tengo el campo identificacion asi en readonly por que ese campo muestra un dato cargado según una selección.... ya pongo acá la animación (mas abajo) del proceso.. la idea es mostrar la foto de la persona seleccionada.. al salir el dato no hay cambios en la imagen reviso la consola sobre la imagen y no cambia su valor img pues debo escribirla será que onchange es la mejor opción o cual uso

otra consulta las fotos están en un directorio almacenadas fotos/ como hago para que tome esa ruta y las fotos están nombradas así foto-123333 (los números son la identificación) como hago para adicionar ese palabra foto- ya si tome la imagen correspondiente almacenada
ejemplo:

fotos/foto-12345

pues la imagen me la toma así revisando en la consola...

consola

graciasss

Valora esta respuesta

Comentar

Pos: 49

Val: 37

cargar imagen según su nombre en un input

Publicado por algoritmo (14 intervenciones) el 29/10/2022 21:09:44

src debe contener la ruta absoluta o relativa (entre otras) del archivo imagen.

Quizás src='fotos/foto-12345' aunque echo de menos la extensión del fichero. Es imprescindible ponerla.

Consejo: Localiza en una ventana de tu sistema operativo uno de los archivos que pretendes mostrar. Ábrelo con tu navegador y fíjate en la dirección que ofrece el navegador. Esa dirección te dará la pista de lo que debes escribir.

Valora esta respuesta

Comentar

Pos: 15

Val: 159

cargar imagen según su nombre en un input

Publicado por Eduardo (186 intervenciones) el 29/10/2022 21:15:02

pues mira que acá si me la toma pero esta es enviando el formulario

osea el ejemplo que me pasas funcionaria si le ponemos esas rutas y nombre antepuesto a la identificación lo otro es como hacer para en vez de onchange sea otra opción que sirva pues como vez el valor sale al seleccionar

algún truquito...

Valora esta respuesta

Comentar

Pos: 49

Val: 37

cargar imagen según su nombre en un input

Publicado por algoritmo (14 intervenciones) el 29/10/2022 22:01:37

Hasta donde yo se, si cambias un valor sin utilizar teclado, no se desencadena eventos.

Lo único que se me ocurre es que el proceso que modifica el value del input debe incorporar además el cambio del src.

Valora esta respuesta

Comentar

Pos: 15

Val: 159

cargar imagen según su nombre en un input

Publicado por Eduardo (186 intervenciones) el 29/10/2022 22:02:09

hice que me funcionara ya pone el nombre de la foto real como esta almacenada... pero no pone la ruta /fotos alguna manera de concatenar en el codigo js esa palabra fotos/

se podría concatenar y anteponer al nombre de la foto la palabra fotos/ en esta line ????

document.getElementById('img').src = document.getElementById('foto').value;

pues al cargar la imagen para mostrala me toca abrir la consola y ponerla y así aparece de inmediato

fff

Valora esta respuesta

Comentar

Pos: 15

Val: 159

cargar imagen según su nombre en un input

Publicado por Eduardo (186 intervenciones) el 30/10/2022 16:27:55

Lo logre usando esto despues del src

document.getElementById('img').src = 'fotos/'+document.getElementById('foto').value;

Mil Graciassss

Valora esta respuesta

Comentar

al activar casilla se ejecute la condicion dada

[AYUDA] mueve todos los elementos hacia la derecha (y el último hacia la primera posición)