Botón de carga de elemento de archivo de formulario Bootstrap de Twitter
¿Por qué no hay un elegante botón de carga de elementos de archivo para el arranque de Twitter? Sería genial si se implementara el botón principal azul para el botón de carga. ¿Es posible siquiera perfeccionar el botón de carga usando CSS? (parece un elemento nativo del navegador que no se puede manipular)
Aquí hay una solución para Bootstrap 3, 4 y 5.
Para crear un control de entrada de archivo funcional que parezca un botón, solo necesita HTML:
HTML
<label class="btn btn-default">
Browse <input type="file" hidden>
</label>
Esto funciona en todos los navegadores modernos, incluido IE9+. Si también necesita soporte para el antiguo IE, utilice el enfoque heredado que se muestra a continuación.
Esta técnica se basa en el atributo HTML5 hidden. Bootstrap 4 utiliza el siguiente CSS para corregir esta función en navegadores que no lo admiten. Es posible que tengas que agregarlo si estás usando Bootstrap 3.
[hidden] {
display: none !important;
}
Enfoque heredado para el antiguo IE
Si necesita soporte para IE8 y versiones anteriores, utilice el siguiente HTML/CSS:
HTML
<span class="btn btn-default btn-file">
Browse <input type="file">
</span>
CSS
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
Tenga en cuenta que el antiguo IE no activa la entrada del archivo cuando hace clic en un <label>, por lo que el CSS "inflado" hace un par de cosas para solucionarlo:
- Hace que la entrada del archivo abarque todo el ancho/alto del entorno.
<span> - Hace que la entrada del archivo sea invisible
Comentarios y lecturas adicionales
He publicado más detalles sobre este método, así como ejemplos de cómo mostrarle al usuario cuáles/cuántos archivos están seleccionados:
https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/
Me sorprende que no se mencionara el <label>elemento.
Solución:
<label class="btn btn-primary" for="my-file-selector">
<input id="my-file-selector" type="file" class="d-none">
Button Text Here
</label>
No hay necesidad de ningún JS o CSS original...
Solución para incluir el nombre del archivo:
<label class="btn btn-primary" for="my-file-selector">
<input id="my-file-selector" type="file" style="display:none"
onchange="$('#upload-file-info').text(this.files[0].name)">
Button Text Here
</label>
<span class='label label-info' id="upload-file-info"></span>
La solución anterior requiere jQuery.
Nota: utilícelo $.text()cuando muestre contenido proporcionado por el usuario en la página. Se utilizó una versión anterior de esta respuesta $.html()que no es segura: los nombres de archivos pueden contener marcado HTML.
Sin necesidad de complementos adicionales, esta solución de arranque funciona muy bien para mí:
<div style="position:relative;">
<a class='btn btn-primary' href='javascript:;'>
Choose File...
<input type="file" style='position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;' name="file_source" size="40" onchange='$("#upload-file-info").html($(this).val());'>
</a>
<span class='label label-info' id="upload-file-info"></span>
</div>
manifestación:
http://jsfiddle.net/haisumbhatti/cAXFA/1/ (arranque 2)
http://jsfiddle.net/haisumbhatti/y3xyU/ (arranque 3)
