Estoy luchando con bootstrap 4 explorador de archivos. Si uso custom-file-control veré Choose file value todo el tiempo. https://v4-alpha.getbootstrap.com/components/forms/#file-browser
Me gustaría cambiar el valor de elegir archivo después de que el archivo ha sido elegido. Este valor está oculto en css .custom-file-control:lang(en)::after
y no sé cómo acceder a él y cambiarlo en javascript. Puedo obtener el valor del archivo elegido así:
document.getElementById("exampleInputFile").value.split("\\").pop();
no necesito cambiar
.custom-file-control:lang(en)::after {
content: "Choose file...";
}
de alguna manera
Actualizado en 2018
**Bootstrap 4.1+ ***
Ahora en Bootstrap 4.1 el "Choose file..." texto de marcador de posición se establece en el custom-file-label
:
<div class="custom-file" id="customFile" lang="es">
<input type="file" class="custom-file-input" id="exampleInputFile" aria-describedby="fileHelp">
<label class="custom-file-label" for="exampleInputFile">
Select file...
</label>
</div>
Cambiar el texto del botón "Examinar" requiere un poco más de CSS o SASS. Observe también cómo funciona traducción de idiomas utilizando el atributo lang=""
.
.custom-file-input ~ .custom-file-label::after {
content: "Button Text";
}
https://www.codeply.com/go/gnVCj66Efp (CSS)
https://www.codeply.com/go/2Mo9OrokBQ (SASS)
Otra opción de Bootstrap 4.1
Alternativamente, puede utilizar este plugin de entrada de archivos personalizados
https://www.codeply.com/go/uGJOpHUd8L/file-input
Bootstrap 4 Alpha 6 (Respuesta original)
Creo que hay 2 cuestiones separadas aquí ..
<label class="custom-file" id="customFile">
<input type="file" class="custom-file-input">
<span class="custom-file-control form-control-file"></span>
</label>
1 - Cómo cambiar el marcador de posición inicial y el texto del botón
En Bootstrap 4, el valor inicial del marcador de posición se establece en el custom-file-control
con un pseudo elemento CSS ::after
basado en el lenguaje HTML. El botón de archivo inicial (que en realidad no es un botón, pero lo parece) se establece con un pseudoelemento CSS ::before
. Estos valores pueden anularse con CSS..
#customFile .custom-file-control:lang(en)::after {
content: "Select file...";
}
#customFile .custom-file-control:lang(en)::before {
content: "Click me";
}
2 - Cómo obtener el valor del nombre de archivo seleccionado, y actualizar la entrada para mostrar el valor.
Una vez seleccionado un archivo, el valor se puede obtener utilizando JavaScript/jQuery.
$('.custom-file-input').on('change',function(){
var fileName = $(this).val();
})
Sin embargo, dado que el texto del marcador de posición para la entrada es un pseudoelemento, no hay una forma fácil de manipularlo con Js/jQuery. Sin embargo, puedes tener otra clase CSS que oculte el pseudocontenido una vez seleccionado el archivo...
.custom-file-control.selected:lang(en)::after {
content: "" !important;
}
Usa jQuery para cambiar la clase .selected
en el .custom-file-control
una vez que el archivo es seleccionado. Esto ocultará el valor inicial del marcador de posición. A continuación, poner el valor de nombre de archivo en el .form-control-file
span...
$('.custom-file-input').on('change',function(){
var fileName = $(this).val();
$(this).next('.form-control-file').addClass("selected").html(fileName);
})
A continuación, puede manejar la carga de archivos o re-selección según sea necesario.
Acabo de resolverlo de esta manera
Html:
<div class="custom-file">
<input id="logo" type="file" class="custom-file-input">
<label for="logo" class="custom-file-label text-truncate">Choose file...</label>
</div>
JS:
$('.custom-file-input').on('change', function() {
let fileName = $(this).val().split('\\').pop();
$(this).next('.custom-file-label').addClass("selected").html(fileName);
});
Nota: Gracias a ajax333221 por mencionar la clase .text-truncate
que ocultará el desbordamiento dentro de la etiqueta si el nombre del archivo seleccionado es demasiado largo.
Para cambiar el idioma del explorador de archivos:__ Como una alternativa a lo que ZimSystem mencionó (anular el CSS), una solución más elegante es sugerida por los documentos de bootstrap: construye tus estilos personalizados de bootstrap añadiendo idiomas en SCSS. Lee sobre ello aquí: https://getbootstrap.com/docs/4.0/components/forms/#file-browser
Nota: necesitas tener el atributo lang correctamente configurado en tu documento para que esto funcione.
Para actualizar el valor en la selección de archivos:__ Usted podría hacerlo con js en línea como esta:
<label class="custom-file">
<input type="file" id="myfile" class="custom-file-input" onchange="$(this).next().after().text($(this).val().split('\\').slice(-1)[0])">
<span class="custom-file-control"></span>
</label>
Nota: la parte .split('\\\').slice(-1)[0]
elimina el prefijo C:\fakepath\.