Pregunta:
Fecha: 12-06-2017 07:00:30
(En Español)
Les agradeceria su ayuda, que tengan un buen dia. Votos: 1 - Respuestas: 18 - Vistas: 30 Compartir en: Google Facebook Twitter LinkedIn Link
Cargar foto desde la carpeta al formulario html[Resuelta]
Muy buena, le escribo para ver si me pueden ayudar, lo que sucede es que estoy haciendo un proyecto y quisiera que cuando ponga el numero de cedula en el formulario html se muestre la foto que tengo en la carpeta "foto", para registralo en la base datos.Les agradeceria su ayuda, que tengan un buen dia. Votos: 1 - Respuestas: 18 - Vistas: 30 Compartir en: Google Facebook Twitter LinkedIn Link
Respuestas:
-
Fecha: 12-06-2017 18:41:20 Lo primero que debes hacer es relacionar la foto con ese número de cédula, una forma sencilla es colocarle a la foto el número de cédula como nombre, algo así 12345326.jpg, luego en el input de la cédula, con el método onChange() o con el método onfocusout() o también con el método onBlur() mandas a llamar a una función javascript (o JQuery) que dispare un ajax para que busque la imagen y la coloque en el campo correspondiente...es sencillo Votos: 1 - Link respuesta
-
Fecha: 13-06-2017 06:28:13 gracias julio por la info. pero lo hice algo estoy haciendo mal me podras indicar el error, la carpeta se llama "imagen" y tengo imagen con el nombre de la cedula.
Este el codigo.
<img id="imagen" alt="Aqui se carga la imagen" src=""/> <form action=""> <input type="text" name="cedula" id="/imagen" onchange="document.getElementById('imagen').src=this.value;"/> </form>Votos: 0 - Link respuesta -
Fecha: 13-06-2017 06:40:12 lo que te entendi es que quieres poner la cedula y ese campo busque la foto relacionada a esa cedula? lo puddes hacer al momento con ajax http://www.lawebdelprogramador.com/foros/AJAX/1479350-Enviar-variable-definida-fuera-de-ajax-por-metodo-post.html o bien por post y del lado del servidor osea tu archivo php busca la foto , recomendacion q la imagen se llame igual que la cedula para q busques numdecedula.jpg y sea mas facil Votos: 1 - Link respuesta
-
Fecha: 13-06-2017 19:14:42 Hola Francis
Te dejo el codigo funcional para cargar la imagen cuando se sale del input text como se puede ver en la imagen.
en este caso muestra la imagen del tipo jpg con extensión de archivo en minúscula .jpg
Célula: 123456 y el archivo es 123456.jpg y se encuentra dentro de la carpeta imagen conformada la ruta completa imagen/123456.jpg
<!doctype html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Form Imagen</title> <script> function cargarImagen(celula) { document.getElementById('imagen').src= 'imagen/'+celula+'.jpg'; } </script> </head> <body> <form action="" method="post"> <img id="imagen" alt="Aqui se carga la imagen" src=""/> <br> Ingrese Celula: <input type="text" name="celula" value="" onblur="cargarImagen(this.value)" autofocus> </form> </body> </html>
He utilizado el método onBlur(), como dice Julio puedes utilizar los métodos onfocusout() o onChange() según tus necesidades
Cuando se abandona el campo text se ejecuta la función cargarImagen() pasándole como parámetro lo que se ha ingresado en el input.
Espero que te sirva como punto de partida para continuar con tu proyecto.
Saludos Votos: 2 - Link respuesta -
Fecha: 14-06-2017 05:03:48 Muchas gracias a todos por su aporte y a usted walter excelente me funciono a la perfección, eso era lo que buscaba.
Cada día aprendo algo nuevo gracias a que ustedes comparten sus conocimientos con los demás, gracias. Votos: 2 - Link respuesta -
Fecha: 14-06-2017 11:47:47 De nada Francis.
Entre todos aprendemos siempre algo mas ;)
Saludos Votos: 1 - Link respuesta -
Fecha: 05-01-2018 14:58:48 Walter amigo saludos muy bonita esa bandera veo que eres argentino, lo cierto es que tengo mucho tiempo buscando un código como el tuyo y está excelente amigo, quisiera saber si se puede ver la imagen pero en una ventana aparte de donde está el formulario y a su tamaño original o sea carta, hice la prueba pero me sale muy pequeña ojalá puedas ayudarme. Que Dios te guie, inspire y proteja en todo lo que haces. Votos: 0 - Link respuesta
-
Fecha: 06-01-2018 10:40:12 Hola Jose, que tengas un buen 2018.
No entiendo a que te refieres en que se muestre en una ventana a parte.
Por favor postea el codigo que has realizado en donde lo hace.
Saludos Votos: 0 - Link respuesta -
Fecha: 06-01-2018 12:14:29 Walter amigo puse el script en el head y luego en un div el formulario pero es una parte de 365 px y me sale la imagen ahí pero quisiera saber si puedo hacer que me salga en otra ventana estaba intentado con la target="_blank" pero me anula el script y no se muestra nada, amigo de todas maneras lo puse en otro div y me sale a todo lo ancho de la página pero no importa lo imprimo y todo bien a tamaño carta gracias amigo de todas formas si tienes una manera de que salga como te expliqué en otra ventana estaría mejor, saludos. Votos: 0 - Link respuesta
-
Fecha: 06-01-2018 14:23:45 Hola Jose
Creo entender lo que quieres hacer, prueba con este codigo, lo que hace es mostrar la imagen en una pestaña nueva, No es ventana nueva.
<!doctype html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Form Imagen</title> <script> function ventana(celula){ var imagen = 'imagen/'+celula+'.jpg'; var ventana = window.open(imagen, "scrollbars=no, resizable=no"); } </script> </head> <body> <form action="#" method="post"> Ingrese Celula: <input type="text" name="celula" value="" autofocus onblur="ventana(this.value)"> <p>Por ejemplo 123456</p> </form> </body> </html>
Saludos Votos: 0 - Link respuesta -
Fecha: 06-01-2018 14:35:46 Walter eres grande hermano eso es exactamente lo que te expliqué, saludos que Dios y la virgen te protejan siempre hermano, perfecto; un abrazo después que suba la página te mando el link ahora estoy en localhost. Votos: 1 - Link respuesta
-
Fecha: 06-01-2018 15:24:52 Jose que bueno que te haya servido ;) exitos para tu proyecto
Saludos Votos: 0 - Link respuesta -
Fecha: 06-01-2018 19:06:21 Gracias amigo, personas como usted son extraordinarias, saludos amigo estaba buscando ese código hace mucho tiempo y de repente tu Walter Sánchez lo publicaste estoy muy agradecido todo el éxito en tu carrera. Votos: 0 - Link respuesta
-
Fecha: 06-01-2018 19:51:59 De nada Jose. Es grato saber que haya sido util.
Como lo has mencionado si quieres puedes dejar el link de la página.
Te dejo una variante. Si deseas que se abra en otra ventana (No pestaña) puedes utilizar este codigo.
<!doctype html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Form Imagen</title> <script> function ventana(celula){ var imagen = 'imagen/'+celula+'.jpg'; var ventana = window.open(imagen,"","scrollbars=no, resizable=no"); } </script> </head> <body> <form action="" method="post"> Ingrese Celula: <input type="text" name="celula" value="" autofocus onblur="ventana(this.value)"> <p>Por ejemplo 123456</p> </form> </body> </html>
Un problema es que es posible que la ventana quede escondida y no en primer plano.
Saludos Votos: 0 - Link respuesta -
Fecha: 07-01-2018 04:04:25 Walter saludos amigo gracias por tus atenciones no he probado la nueva variante pero la última que abre en la pestaña está genial era lo que quería porque así puedes guardar o imprimir esa imagen abre perfecto en otra ventana o pestaña. Gracias hermano, y gracias a la página phpcentral.com y a Francis que fue la que hizo la pregunta. Votos: 0 - Link respuesta
-
Fecha: 07-01-2018 15:15:59 Walter se podría poner un botón submit en el formulario por ejemplo: "Enviar" y que sólo dándole click allí me hiciera la función y no dándole por fuera de la text area ya que al darle click a cualquier área de la ventana se activa la función aún sin tener ninguna cédula. Votos: 0 - Link respuesta
-
Fecha: 07-01-2018 17:53:16 Jose si se puede hacer con un botón, pero el problema que se abra la pestaña sin ingresar ninguna célula es porque hay que hacer una validación previamente.
El codigo con el botón es el siguiente
<!doctype html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Form Imagen</title> <script> function ventana(celula){ var imagen = 'imagen/'+celula+'.jpg'; var ventana = window.open(imagen, "location=no,directories=0,scrollbars=no, resizable=no"); } </script> </head> <body> <form action="" method="post"> Ingrese Celula: <input type="text" id="celula" name="celula" value="" autofocus> <p>Por ejemplo 123456</p> <button onclick="ventana(celula.value)">Abrir ventana</button> </form> </body> </html>
Si hace click en el botón sin ingresar nada en el input sucedería lo mismo que en los códigos anteriores, abre la pestaña sin la imagen.
La solución a esto tanto para abrir haciendo clic afuera del input como en el codigo con el boton es hacer una validación previa antes de abrir la pestaña, se tiene que validar que el input por lo menos no este vacio.
Este seria el codigo con dicha validación con el botón
<!doctype html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Form Imagen</title> <script> function ventana(celula){ if(celula === ''){ alert("Debe ingresar una celula"); return false; }else{ var imagen = 'imagen/'+celula+'.jpg'; var ventana = window.open(imagen, "location=no,directories=0,scrollbars=no, resizable=no"); } } </script> </head> <body> <form action="" method="post"> Ingrese Celula: <input type="text" id="celula" name="celula" value="" autofocus> <p>Por ejemplo 123456</p> <button onclick="ventana(celula.value)">Abrir ventana</button> </form> </body> </html>
Este seria el codigo con dicha validación sin el botón, saliendo del input
<!doctype html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Form Imagen</title> <script> function ventana(celula){ if(celula === ''){ alert("Debe ingresar una celula"); return false; }else{ var imagen = 'imagen/'+celula+'.jpg'; var ventana = window.open(imagen, "location=no,directories=0,scrollbars=no, resizable=no"); } } </script> </head> <body> <form action="" method="post"> Ingrese Celula: <input type="text" name="celula" value="" autofocus onblur="ventana(this.value)"> <p>Por ejemplo 123456</p> </form> </body> </html>
Una de las evaluaciones que se deberia hacer que solo se pueda ingresar numermeros en el input.
Por ejemplo en el siguiente codigo del boton:
<!doctype html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Form Imagen</title> <script> function ventana(celula){ if(celula === ''){ alert("Debe ingresar una celula"); // document.getElementById("celula").focus(); return false; }else{ var imagen = 'imagen/'+celula+'.jpg'; var ventana = window.open(imagen, "location=no,directories=0,scrollbars=no, resizable=no"); } } function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode < 48 || charCode > 57)) return false; return true; } </script> </head> <body> <form action="" method="post"> Ingrese Celula: <input type="text" id="celula" name="celula" value="" autofocus onkeypress="return isNumberKey(event)" > <p>Por ejemplo 123456</p> <button onclick="ventana(celula.value)">Abrir ventana</button> </form> </body> </html>
Te aconsejo que estudies javascript y luego la libreria de jQuery para que puedas comprender este lenguaje y puedas hacer códigos según tus necesidades.
PD// puedes valorar las respuestas que te brindamos haciendo clic en las flechas
Verde: Positivo, Rojo: Negativo
Saludos Votos: 1 - Link respuesta -
Fecha: 07-01-2018 18:36:34 Walter gracias por el consejo y por estos códigos el último está genial, y para que me buscara una imagen en 1 carpeta o en otra carpeta diferente sería con dos radio button "niño" "niña" habría que crear las 2 carpetas solamente y cuál sería la modificación al código, amigo. Votos: 0 - Link respuesta
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
