javascript - fileinput - Bootstrap 4 Entrada de archivo
tooltip bootstrap 4 (10)
A partir de Bootstrap 4.3 , puede cambiar el marcador de posición y el texto del botón dentro de la etiqueta:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="custom-file">
<input type="file" class="custom-file-input" id="exampleInputFile">
<label class="custom-file-label" for="exampleInputFile" data-browse="{Your button text}">{Your placeholder text}</label>
</div>
Estoy luchando con el navegador de archivos bootstrap 4. Si uso un control de archivo personalizado, veré Elegir el valor del archivo 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 se haya elegido el archivo.
Este valor está realmente oculto en css
.custom-file-control:lang(en)::after
y no sé cómo acceder y cambiarlo en javascript.
Puedo obtener el valor del archivo elegido de esta manera:
document.getElementById("exampleInputFile").value.split("//").pop();
no necesito cambiar
.custom-file-control:lang(en)::after {
content: "Choose file...";
}
de algun modo
Con la ayuda de jquery, se puede hacer así. Código:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script>
$(function() {
$(document).on(''change'', '':file'', function() {var input = $(this), numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(////g, ''/'').replace(/.*///, '''');input.trigger(''fileselect'', [numFiles, label]);
});
$(document).ready( function() {
$('':file'').on(''fileselect'', function(event, numFiles, label) {var input = $(this).parents(''.custom-file'').find(''.custom-file-label''),
log = numFiles > 1 ? numFiles + '' files selected'' : label;if( input.length ) {input.text(log);} else {if( log ) alert(log);}});
});
});
</script>
</body>
</html>
Sin JQuery
HTML:
function onChangeFileInput(elem){
var sibling = elem.nextSibling.nextSibling;
sibling.innerHTML=elem.value;
return true;
}
JS:
function onChangeFileInput(elem){ var sibling = elem.nextSibling.nextSibling; sibling.innerHTML=elem.value; return true; }
KliG
Solo agrego esto en mi archivo CSS y funciona:
.custom-file-label::after{content: ''New Text Button'' !important;}
Solo lo resolví 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.
Solución basada en la respuesta @Elnoor, pero trabajando con entrada de formulario de carga de múltiples archivos y sin el "hack de fakepath":
HTML:
<div class="custom-file">
<input id="logo" type="file" class="custom-file-input" multiple>
<label for="logo" class="custom-file-label text-truncate">Choose file...</label>
</div>
JS:
$(''input[type="file"]'').on(''change'', function () {
let filenames = [];
let files = document.getElementById(''health_claim_file_form_files'').files;
for (let i in files) {
if (files.hasOwnProperty(i)) {
filenames.push(files[i].name);
}
}
$(this).next(''.custom-file-label'').addClass("selected").html(filenames.join('', ''));
});
Bootstrap 4
Hoy necesito crear un botón de exploración con la opción de archivos de carga múltiple, todos los fragmentos anteriores no son buenos para mí.
El ejemplo oficial de Bootstrap tampoco funciona cuando selecciono varios archivos.
Se me ocurrió este código que puede ayudar a otros en el futuro.
<div class="container mt-5">
<h1 class="text-center">Bootstrap 4 Upload multiple files</h1>
<div class="col-sm-4 mr-auto ml-auto border p-4">
<form method="post" enctype="multipart/form-data" action="upload.php">
<div class="form-group">
<label><strong>Upload Files</strong></label>
<div class="custom-file">
<input type="file" name="files[]" multiple class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</div>
<div class="form-group">
<button type="submit" name="upload" value="upload" id="upload" class="btn btn-block btn-dark"><i class="fa fa-fw fa-upload"></i> Upload</button>
</div>
</form>
</div>
El código js se da a continuación.
$(document).ready(function() {
$(''input[type="file"]'').on("change", function() {
let filenames = [];
let files = document.getElementById("customFile").files;
if (files.length > 1) {
filenames.push("Total Files (" + files.length + ")");
} else {
for (let i in files) {
if (files.hasOwnProperty(i)) {
filenames.push(files[i].name);
}
}
}
$(this)
.next(".custom-file-label")
.html(filenames.join(","));
});
});
El ejemplo del código de trabajo se da here .
Para cambiar el idioma del navegador de archivos:
Como alternativa a lo que mencionó
ZimSystem
(anular el CSS), los documentos de arranque sugieren una solución más elegante: cree sus estilos de arranque personalizados agregando idiomas en SCSS
Lea sobre esto aquí:
https://getbootstrap.com/docs/4.0/components/forms/#file-browser
Nota : debe tener el atributo lang configurado correctamente en su documento para que esto funcione
Para actualizar el valor en la selección de archivos:
Podrías hacerlo con js en línea como este:
<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 /
Actualizado 2018
Bootstrap 4.1+
Ahora en Bootstrap 4.1, el texto del marcador de posición "Elegir archivo ..." se establece en la
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 de CSS o SASS extra.
Observe también cómo
funciona la 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 usar este complemento de entrada de archivo personalizado
https://www.codeply.com/go/uGJOpHUd8L/file-input
Bootstrap 4 Alpha 6 (Respuesta original)
Creo que hay 2 problemas separados 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 cambia 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 elemento pseudo
::after
CSS basado en el lenguaje HTML.
El botón de archivo inicial (que no es realmente un botón pero parece uno) está configurado con un elemento pseudo
::before
CSS.
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 que se selecciona un archivo, el valor se puede obtener usando JavaScript / jQuery.
$(''.custom-file-input'').on(''change'',function(){
var fileName = $(this).val();
})
Sin embargo, dado que el texto de marcador de posición para la entrada es un pseudo elemento, no hay una manera fácil de manipular esto con Js / jQuery . Sin embargo, puede tener otra clase CSS que oculta el pseudo contenido una vez que se selecciona el archivo ...
.custom-file-control.selected:lang(en)::after {
content: "" !important;
}
Use jQuery para alternar la clase
.selected
en
.custom-file-control
una vez que se selecciona el archivo.
Esto ocultará el valor inicial del marcador de posición.
Luego ponga el valor del nombre del archivo en el archivo
.form-control-file
span ...
$(''.custom-file-input'').on(''change'',function(){
var fileName = $(this).val();
$(this).next(''.form-control-file'').addClass("selected").html(fileName);
})
Luego puede manejar la carga del archivo o la re-selección según sea necesario.
<INPUT type="file" class="custom-file-input" onchange="return onChangeFileInput(this);">