elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Rompecabezas de Bitcoin, Medio millón USD en premios


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  formulario / subir archivo / icono imagen html/php/javascript		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: formulario / subir archivo / icono imagen html/php/javascript  (Leído 7,409 veces)
Neibar

Desconectado Desconectado

Mensajes: 47


Ver Perfil
formulario / subir archivo / icono imagen html/php/javascript
« en: 3 Mayo 2012, 21:28 pm »
igual lo que voy a preguntar es imposible, o bastante complicado.

Pero mi idea es la de tener este formulario, pasado a una imagen. Me explico.
En vez de que salga la barrita de examinar, tener una imagen que al hacer click sobre ella
se abra directamente el examinador (tal como haria en el formulario)

Código
  1.  
  2. <form action="upload.php" method="post" enctype="multipart/form-data">
  3. <input name="archivo" type="file" size="35" />
  4. <input name="enviar" type="submit" value="Subir" />
  5. <input name="action" type="hidden" value="upload" />     
  6. </form>
  7.  
  8.  

Supongo que pensareis que son ganas de comerse la cabeza teniendo ya el formulario que funciona, lo sé, pero quedaria "más bonito" por así decirlo.

Gracias de antemano!
En línea
adastra
Endless Learner
Ex-Staff
*
Desconectado Desconectado

Mensajes: 885


http://thehackerway.com/


Ver Perfil WWW
Re: formulario / subir archivo / icono imagen html/php/javascript
« Respuesta #1 en: 4 Mayo 2012, 00:00 am »
Sencillo.
Crea una hoja de estilos CSS que contenga la imagen y la defines en el botón.
Lee un poco sobre CSS en internet para que entiendas lo que te estoy diciendo (en el caso de que lo hayas comprendido ya)
Un Saludo.
En línea
http://twitter.com/jdaanial
http://thehackerway.com/

Cursos de hacking avanzado - THW Academy http://academy.thehackerway.com
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: formulario / subir archivo / icono imagen html/php/javascript
« Respuesta #2 en: 4 Mayo 2012, 00:22 am »
Hola,
@adastra, en realidad con el campo "file" no es tan sencillo como parece. El campo file no es otro botón tan normal y corriente como los demás y CSS apenas puede con el.

@Neibar, lo que se me ocurre es que uses javascript para imitar el evento. Tu pones la imagen o el boton, y luego haces con javascript que al clickear sobre ese boton, en realidad clickee sobre el campo file.

Ejemplo (con jquery):
Código
  3.    <style type="text/css">
  4.       #btnexaminar {display:none}
  5.    </style>
  6. </head>
  8. <form action="upload.php" method="post" enctype="multipart/form-data">
  9.   <input name="archivo" type="file" id="btnexaminar" class="oculto" size="35" />
  10.   <img src="imagen.png" alt="Boton Examinar" onClick="document.getElementById('btnexaminar').click(); />
  11.   <input name="archivo" type="file" size="35" />
  12.   <input name="enviar" type="submit" value="Subir" />
  13.   <input name="action" type="hidden" value="upload" />     
  14. </form>
  15. </body>
  16. </html>

Saludos
En línea
adastra
Endless Learner
Ex-Staff
*
Desconectado Desconectado

Mensajes: 885


http://thehackerway.com/


Ver Perfil WWW
Re: formulario / subir archivo / icono imagen html/php/javascript
« Respuesta #3 en: 4 Mayo 2012, 00:52 am »
En realidad no es tan complicado...
Por ejemplo, esto se puede hacer con primefaces:
http://www.primefaces.org/showcase-labs/ui/fileUploadSingle.jsf
Si os fijáis en el código HTML que ha generado primefaces para dicho componente, ha necesitado una etiqueta <span> y un estilo. En concreto en estas lineas:
Código:
<span class="ui-button-text">Choose</span><input type="file" id="j_idt15:j_idt16_input" name="j_idt15:j_idt16_input" />
Y como podéis ver, tiene un estilo completamente personalizado, lo mismo se puede extrapolar a escribir manual la página HTML+CSS. (Sin necesidad de implementar javascript).
En línea
http://twitter.com/jdaanial
http://thehackerway.com/

Cursos de hacking avanzado - THW Academy http://academy.thehackerway.com
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: formulario / subir archivo / icono imagen html/php/javascript
« Respuesta #4 en: 4 Mayo 2012, 02:42 am »
Con librerías es fácil... no te digo que no.. pero prueba hacer lo mismo con puro CSS y XHTML (no html5).

:)

Saludos
En línea
Neibar

Desconectado Desconectado

Mensajes: 47


Ver Perfil
Re: formulario / subir archivo / icono imagen html/php/javascript
« Respuesta #5 en: 4 Mayo 2012, 22:08 pm »
Código
  1. <style>#btnexaminar {display:none}</style>
  2. <form action='upload.php' method='post' enctype='multipart/form-data'></td><tr>
  3.                                      <td><input name='archivo' type='file' id='btnexaminar' class='oculto' size='35' /></td><tr>
  4.                                      <td id="subir"><input name="enviar" id="boton-enviar" type="submit" value="Subir" /></td><tr>
  5.                                      <td><input name="action" type="hidden" value="upload" />
  6.  
  7.  

Al final esto era lo más fácil , gracias a todos igualmente :)
En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Escribir un formulario html en una pagina html
Desarrollo Web 		adriancarcamo 1 3,064 Último mensaje 21 Febrero 2012, 18:38 pm
por Spider-Net
Guardar parametros de un formulario (Subir Archivo)
Java 		patiuxi 3 2,182 Último mensaje 4 Diciembre 2013, 12:25 pm
por ThinkByYourself
Importar contenido de archivo txt en html / javascript!!!
Desarrollo Web 		<][E@GLE][> 2 3,005 Último mensaje 20 Diciembre 2013, 12:15 pm
por USLO
¿Cómo alinear elementos de formulario por bloques como en la imagen? HTML/CSS
Desarrollo Web 		NathanD 4 4,959 Último mensaje 23 Septiembre 2014, 20:12 pm
por onStrike
Subir archivos a la pagina [HTML y javascript]
Desarrollo Web 		joaquinrekpo 2 3,091 Último mensaje 17 Septiembre 2016, 01:14 am
por Jeferi
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines