En este artículo de sugerencia rápida, veremos cómo usar texto y estilos personalizados con la entrada de archivos Bootstrap 4.
Entrada de archivo Bootstrap 4
La entrada de archivos HTML le permite cargar uno o varios archivos, como imágenes, o importar datos desde archivos.
Bootstrap 4 Entrada básica y personalizada
Bootstrap 4 le permite utilizar dos tipos de entradas de archivo que son entradas básicas y personalizadas.
Simplemente puede agregar el .form-control-file
a su <input>
elemento para una entrada de archivo básica.
Para la entrada del archivo personalizado, debe agregar la .custom-file-input
clase al <input>
elemento y la .custom-file-label
clase al <label>
elemento.
Este es un ejemplo básico de entrada de archivo Bootstrap 4:
<div class="form-group">
<label for="input1">Example file input</label>
<input type="file" class="form-control-file" id="input1">
</div>
Este es un segundo ejemplo con una entrada de archivo personalizada:
<div class="custom-file">
<input type="file" class="custom-file-input" id="customInput">
<label class="custom-file-label" for="customInput">Select file</label>
</div>
Personalizar la entrada del archivo con Bootstrap
Puede usar las clases Bootstrap 4 y CSS para personalizar la entrada del archivo personalizado.
Tomemos el siguiente ejemplo:
<div class="container">
<label class="custom-file" for="customInput">
<input type="file" class="custom-file-input" id="customInput" aria-describedby="fileHelp">
<span class="custom-file-control form-control-file"></span>
</label>
</div>
Este es el código CSS para personalizar la entrada del archivo:
#customFile .custom-file-control:lang(en)::after {
content: "Select file...";
}
#customFile .custom-file-control:lang(en)::before {
content: "Click me";
}
Visualización del nombre de archivo seleccionado con JavaScript
Puede mostrar el nombre del archivo seleccionado con JavaScript.
Supongamos que tenemos un custom-file-input
elemento con etiqueta que es el siguiente elemento hermano de la entrada.
Podemos utilizar el siguiente código JavaScript para mostrar el nombre del archivo después de seleccionar un archivo "
document.querySelector('.custom-file-input').addEventListener('change',function(e){
var fileName = document.getElementById("exampleInputFile").files[0].name;
var nextSibling = e.target.nextElementSibling
nextSibling.innerText = fileName
})
0 Comentarios
Dejanos tu comentario para seguir mejorando!