formulario / subir archivo / icono imagen html/php/javascript

Neibar · 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 (html4strict) [Seleccionar]



<form action="upload.php" method="post" enctype="multipart/form-data">
<input name="archivo" type="file" size="35" />
<input name="enviar" type="submit" value="Subir" />
<input name="action" type="hidden" value="upload" />     
</form>

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!

adastra · 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.

#!drvy · 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 (html4strict) [Seleccionar]

<html>
<head>
   <style type="text/css">
      #btnexaminar {display:none}
   </style>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
  <input name="archivo" type="file" id="btnexaminar" class="oculto" size="35" />
  <img src="imagen.png" alt="Boton Examinar" onClick="document.getElementById('btnexaminar').click(); />
  <input name="archivo" type="file" size="35" />
  <input name="enviar" type="submit" value="Subir" />
  <input name="action" type="hidden" value="upload" />     
</form>
</body>
</html>

Saludos

adastra · 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 [Seleccionar]


<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).

#!drvy · 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

Neibar · 4 Mayo 2012, 22:08 PM

Código (html) [Seleccionar]


<style>#btnexaminar {display:none}</style>
<form action='upload.php' method='post' enctype='multipart/form-data'></td><tr>
                                     <td><input name='archivo' type='file' id='btnexaminar' class='oculto' size='35' /></td><tr>
                                     <td id="subir"><input name="enviar" id="boton-enviar" type="submit" value="Subir" /></td><tr>
                                     <td><input name="action" type="hidden" value="upload" />

Al final esto era lo más fácil , gracias a todos igualmente

Test Foro de elhacker.net SMF 2.1

formulario / subir archivo / icono imagen html/php/javascript

Neibar

adastra

#!drvy

adastra

#!drvy

Neibar