botón de carga de archivo sin campo de entrada?

Question

Duplicar posible:
jQuery : simulating a click on a <input type=“file” /> doesn't work in Firefox?

¿Es posible tener un botón de archivo sin una entrada junto a él por defecto? Idealmente, lo único que quiero es un botón que permita al usuario navegar a un archivo sin mostrar lo que seleccionó antes de subirlo. Voy a presentar la forma mediante la siguiente vez que el usuario selecciona un archivo:

$("#file").change(function() { 
    $("#update_button").trigger('click'); 
}); 

Estoy seguro de que esto debe ser posible con un poco de CSS jQuery o magia ...

Answer 1

Si no recuerdo mal, HTML5 le permite llamar al método click en un elemento de entrada oculto para mostrar el cuadro de diálogo de archivo a través de un botón personalizado (¿por qué no simplemente hacer que funcione sin un elemento, no lo sé). Lamentablemente, no todos los navegadores actualmente en uso admiten esto todavía, por lo que está obligado a diseñar una entrada de archivo para que parezca un botón.

Este es un truco hilarante fea pero ingenioso CSS me encontré en un sitio una vez (probablemente Imgur):

.fileupload { 
    width: 100px; 
    height: 50px; 
    position: relative; 
    overflow: hidden; 
    background: ...; /* and other things to make it pretty */ 
} 

.fileupload input { 
    position: absolute; 
    top: 0; 
    right: 0; /* not left, because only the right part of the input seems to 
       be clickable in some browser I can't remember */ 
    cursor: pointer; 
    opacity: 0.0; 
    filter: alpha(opacity=0); /* and all the other old opacity stuff you 
           want to support */ 
    font-size: 300px; /* wtf, but apparently the most reliable way to make 
         a large part of the input clickable in most browsers */ 
    height: 200px; 
} 

Y el código HTML para ir con ella:

<div class="fileupload"> 
    <input type="file" /> 
    Any content here, perhaps button text 
</div> 

Lo que hace ¿hace que la entrada del archivo sea enorme (al cambiar el tamaño de la fuente (!?)) para garantizar que cubra el botón, y luego corta el exceso con overflow: hidden;. Esto puede no funcionar para botones absolutamente enormes.

Answer 2

simplemente puede ocultar el botón input con visibility: hidden;, y adjuntar un controlador de eventos click para el otro botón:

HTML:

<input type="file" name="somename" size="chars"> 
<button>Choose File</button> 

CSS:

input { 
    display: block; 
    visibility: hidden; 
    width: 0; 
    height: 0; 
} 

JavaScript:

$('button').click(function(){ 
    $('input').click(); 
}); 

Aquí está el violín: http://jsfiddle.net/tCzuh/

Answer 3

Una opción a tener en cuenta es aquí:

http://shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Esto permite una mayor personalización de un campo <input>

Answer 4

Si configura la opacidad a 0, entonces puede agregar otro div debajo que se parece a un botón. Puedes darle un estilo como quieras.

Trabajando ejemplo de código siguiente:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

<div class="wrapper"> 
    <div class="fakeuploadbutton">upload</div> 
    <input id="file" type="file" name="file" /> 
</div> 
<script type="text/javascript" charset="utf-8"> 
    jQuery('#file').css('opacity',0);  
</script> 
<style type="text/css" media="screen"> 
    .wrapper { position: relative; } 
    .fakeuploadbutton { 
     background: red url('myuploadbutton.png') no-repeat top left; 
     width: 100px; height: 30px; 
    } 
    #file { 
     position: absolute; 
     top: 0px; left: 0px; 
     width: 100px; height: 30px; 
    } 
</style>