Ver Mensaje Individual
  #14 (permalink)  
Antiguo 13/09/2012, 13:19
Avatar de Quixot
Quixot
 
Fecha de Ingreso: septiembre-2011
Ubicación: Alicante
Mensajes: 20
Antigüedad: 12 años, 8 meses
Puntos: 0
Respuesta: Personalizar botón input=file

En algunos exploradores cuando tienes que validar el formulario desde el servidor al retroceder de página no te respeta el nombre del archivo por lo que he añadido una pequeña modificación.
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style type="text/css">
#NombreArchivo { 
border: solid 1px red; 
font-size:10px; 
font-family:tahoma; 
width:300px;
height:21px;
position:absolute;
margin-top:5.5px;}
input.file {
height:34px;
margin-top:5px;
width:399px;
position: absolute;
text-align: right;
-moz-opacity:0 ;
opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
z-index: 2;}
</style>
</head>
<body onload="ActualizaNombreArchivo();">
<form action="#" name="formulario"/>
<input type="file" id="archivo" class="file"> 
<input type="text" id="NombreArchivo">
<img src="imagenes/examinar2.png" width="99" height="34" style="margin-left:304px"/></form>
</body>
</html>
<script> 
Revisor=document.getElementById("archivo"); 
ContenedorNombre=document.getElementById("NombreArchivo"); 
Revisor.onchange=function() {
ContenedorNombre.value=Revisor.value.replace(/fakepath/gi,'..');}
/*USAR EN <body onload="ActualizaNombreArchivo();"> PARA ACTUALIZAR NOMBRE DEL ARCHIVO*/
function ActualizaNombreArchivo(){
ContenedorNombre.value=Revisor.value.replace(/fakepath/gi,'..');}
</script> 
Como pongo en la anotación hay que poner la etiqueta body de la siguiente forma <body onload="ActualizaNombreArchivo();"> de esta manera al retroceder al cargar la página refresca el nombre del archivo sea el explorador que sea.

SALUDOS!!