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