input file con sólo etiqueta (sin botón ni imput)

Kandorf · #1 (**permalink**) 20/01/2012, 07:02

Hola,
estamos creando un formulario y necesitamos poder subir archivos, pero no nos gusta nada el aspecto del "input type file", queremos poner un texto en el que se pulse y actue de manera similar a cuando se pulsa en el botón de "Examinar..." de un file, hemos pensado en crear el input oculto y activarlo mediante el algún evento que se ejecute al pulsar sobre el div del texto, pero no sabemos si existe alguna propiedad que lo haga.
Hemos visto por internet que en algunos sitios lo hacen con flash, pero no queremos utilizar nada tan complicado, queremos simplemente un comportamiento similar al de input file, pero sin ese aspecto.

¿Se os ocurre alguna manera?

Un saludo y gracias por vuestro tiempo.

maycolalvarez · #2 (**permalink**) 20/01/2012, 07:17

no puedes cambiar el aspecto del input file.

si quieres otra alternativa utilice plugins con flash/applets/silverlight o HTML5 File API

caricatos · #3 (**permalink**) 20/01/2012, 12:06

Hola:

No sé si funciona en todos los navegadores, pero lo que sea que quieras, puedes ponerlo en un label asociado al control file que quieres, pero ocultándolo...

<label for="fichero">Lo que sea</label>
<input type="file" name="archivo" id="fichero" style="display: none" />

Saludos

maycolalvarez · #4 (**permalink**) 20/01/2012, 14:08

Cita:

Iniciado por caricatos

Hola:

No sé si funciona en todos los navegadores, pero lo que sea que quieras, puedes ponerlo en un label asociado al control file que quieres, pero ocultándolo...

<label for="fichero">Lo que sea</label>
<input type="file" name="archivo" id="fichero" style="display: none" />

Saludos

desde Debian en: FF 7, Chrome 12, Opera 10 no me funciona, pero fue interesante probarlo

ni siquiera con accesskey

zerokilled · #5 (**permalink**) 20/01/2012, 14:42

que tal gente!

hice una pequeña comprobación. resulta que en chrome no es posible traer la ventana modal al presionar sobre el label cuando el botón tiene display:none. sin embargo, si es posible cuando tiene visibility:hidden. si visibility no es una opción, también puedes darle una posición absoluta y moverlo fuera de la ventana -valor negativo en left o top. por otro lado, en firefox veo que no es posible traer la ventana al presionar sobre el label. en este caso habría que recurrir a scripting para invocar el método click del input.

Panino5001 · #6 (**permalink**) 20/01/2012, 15:08

Yo suelo usar algo como esto:

Código PHP:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
<style> 
*{margin:0; padding:0; outline:none} 
body{ background: #2e2e2e;color:#999; font-family:"Lucida Grande",Arial,Helvetica,sans-serif;text-shadow: 0 1px 0 black;font-size:11px; overflow:hidden} 
h2{ font-size:18px; margin:5px} 
#extfoto{ 
    width:150px; 
    height:30px; 
    line-height:30px; 
    position:relative; 
    left: 0; 
    top: 0; 
    background:#fff; 
    font-size:30px;  
    opacity:0; 
    filter:alpha(opacity=0); 
    overflow:hidden; 
    margin:10px 0; 
    z-index:100; 
} 
#foto{ 
    width:160px; 
    height:40px; 
    line-height:40px; 
    position:absolute; 
    left: -5px; 
    top: -5px; 
    background:#fff; 
    font-size:40px; 
    opacity:0; 
    filter:alpha(opacity=0); 
    overflow:hidden; 
} 
#bajofoto{ 
    width:150px; 
    height:30px; 
    position:absolute; 
    z-index:1; 
    background-color:#d3d3d3; 
    font-family: ; 
border:1px solid #000; 
    -ms-border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -khtml-border-radius: 5px; 
    text-align:center; 
    line-height:30px; 
    top: 29px; 
    left: 0px; 
    font-family:Arial, Helvetica, sans-serif; font-size:11px; border:1px solid #000;  color:#333;text-shadow:none; cursor:pointer; 
} 
</style> 
<script> 
function $(x){return document.getElementById(x);} 
</script> 
</head> 
 
<body> 
<h2>UPLOAD IMAGEN </h2> 
<form target="ifr" method="post" enctype="multipart/form-data" action="<?php echo basename($_SERVER['PHP_SELF']); ?>"> 
<div id="bajofoto">Subir imagen</div> 
<div id="extfoto"><input onchange="this.form.submit();$('loading').style.visibility='visible';" onmouseover="$('bajofoto').style.background='#f2f2f2';" onmouseout="$('bajofoto').style.background='#d3d3d3';" id="foto" name="foto" type="file" /></div> 
<img id="loading" style="position:absolute; left: 173px; top: 42px; visibility:hidden" src="../images/ajax-loader.gif" width="16" height="11"> 
</form> 
</body> 
</html>

La idea es colocar, por encima del elemento visible, el campo. Pero uso opacity para invisibilizarlo porque visibility lo anularía. Lo que no hay manera (con esta técnica) es de manipular el cursor (principalmente por eso le genero un efecto de rollOver).