Estilo en input file

ananda · #1 (**permalink**) 23/07/2013, 08:10

Hola, tengo que dar un estilo a los input file porqué son horribles. Lo que he pensado es, hacer un input button normal y darle el estilo que quiero y luego hacer un file upload pero con display none y al hacer clic en el botón hacer clic en el input file sin que el usuario lo vea. Lo que pasa es que no sabría como hacerlo, no sabría hacer la función javascript. Os estaría muy agradecido si me pudieseis ayudar un poco, muchas gracias, un saludo.

ArturoGallegos · #2 (**permalink**) 23/07/2013, 08:55

si usas display:none no funcionara, debes usar opacity

y la función, utiliza el evento onchange en el input file, para ejecutar una función que lea su valor y lo envié al input text.... puedes utilizar las ID desde javascript como acceso rápido a dichos elementos

para mas ayuda, favor de intentarlo y mostrar el código probado.

Sin código es difícil ayudarte y aquí se procura no dar código sin que el usuario muestre su código.

wolfoxley · #3 (**permalink**) 23/07/2013, 09:29

logre hacerlo de estas forma espero que te ayude

hace rato escrivi full comentarios pero esta pagina esta mas horrible que la c g todo

vas a tener que chekarlos full

Código Javascript:

Ver original<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <meta charset='UTF-8'/>
</head>
<body>
 
 
<input id="textisselectedanyfile" type="text" value="Not selected any file">
 
<input type="file" name="photo" id="photo" style="display:none" onchange="updateMessage()"/>
 
<div id="loadtextbotton">my btn</div>
 
 
<style>
#loadtextbotton {
    background-color: black;
    color: white;
    padding: 30px;
}
</style>
<script type="text/javascript">
 
 jQuery(document).ready(function() {
     jQuery("#loadtextbotton").click(function() {
         jQuery("#photo").trigger('click');
     });
 });
 
 function updateMessage() {
     jQuery("#textisselectedanyfile").val(jQuery("#photo").val());
     if (jQuery("#photo").val() == "") {
         jQuery("#textisselectedanyfile").val("Not selected any file");
     }
 }
 
</script>
</body>
</html>