Entrada De Ficheiro Bootstrap 4
Eu gostaria de alterar o valor de escolher o ficheiro após o ficheiro ter sido escolhido. Este valor está realmente escondido em css .custom-file-control:lang(en)::after e eu não sei como acessá-lo e alterá-lo em javascript. Eu posso obter o valor do arquivo escolhido assim:
document.getElementById("exampleInputFile").value.split("\\").pop();
.custom-file-control:lang(en)::after {
content: "Choose file...";
}
de alguma forma
4 answers
actualizado 2018
Bootstrap 4.1
Agora o " Escolha o ficheiro..."o texto do item de substituição está definido no 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>
Mudar o texto do botão "Procurar" requer um pouco mais de CSS ou SASS.
.custom-file-input ~ .custom-file-label::after {
content: "Button Text";
}
Https://www.codeply.com/go/gnVCj66Efp (CSS)
https://www.codeply.com/go/2Mo9OrokBQ (SASS)
Repare também como a tradução linguística funcionausando o lang="" atributo.
Bootstrap 4 Alfa 6
Acho que há duas questões distintas..<label class="custom-file" id="customFile">
<input type="file" class="custom-file-input">
<span class="custom-file-control form-control-file"></span>
</label>
1 - Como alterar o texto inicial da substituição e do botão
No Bootstrap 4, o inicial é definido no custom-file-control com um elemento CSS pseudo ::after baseado na linguagem HTML. O botão de arquivo inicial (que não é realmente um botão, mas se parece com um) é definido com um pseudo ::before CSS. Estes valores podem ser substituído por CSS..
#customFile .custom-file-control:lang(en)::after {
content: "Select file...";
}
#customFile .custom-file-control:lang(en)::before {
content: "Click me";
}
2 - Como obter o valor do nome de arquivo selecionado, e atualizar a entrada para mostrar o valor.
Uma vez seleccionado um ficheiro, o valor pode ser obtido usando JavaScript/jQuery.
$('.custom-file-input').on('change',function(){
var fileName = $(this).val();
})
No entanto, uma vez que o texto de substituição para a entrada é um pseudo elemento, não há uma maneira fácil de manipular isto com o Js/jQuery. Poderá, no entanto, ter uma outra classe CSS que esconde o pseudo conteúdo logo que o ficheiro esteja seleccionado...
.custom-file-control.selected:lang(en)::after {
content: "" !important;
}
Use o jQuery para activar ou desactivar a classe .selected na .custom-file-control Assim que o ficheiro estiver seleccionado. Isto irá esconder o valor inicial da substituição. Em seguida, coloque o valor do nome do ficheiro no intervalo .form-control-file...
$('.custom-file-input').on('change',function(){
var fileName = $(this).val();
$(this).next('.form-control-file').addClass("selected").html(fileName);
})
Você pode então lidar com o envio de arquivos ou re-seleção conforme necessário.
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 : graças a ajax333221 por mencionar a classe .text-truncate que irá esconder o fluxo dentro da legenda se o nome do ficheiro seleccionado for demasiado longo.
Para alterar a língua do navegador de ficheiros:
Como alternativa ao que ZimSystem mencionou( sobrepor o CSS), é sugerida uma solução mais elegante pelos documentos de bootstrap: compilar os seus estilos de bootstrap personalizados adicionando línguas no SCSS
Leia sobre isso aqui: https://getbootstrap.com/docs/4.0/components/forms/#file-browser
nota : é necessário que o atributo lang esteja correctamente definido no seu documento para que isto trabalho
Para actualizar o valor na selecção de ficheiros:
Podias fazê - lo com o inline js assim.
<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 : a parte .split('\\').slice(-1)[0] remove o C:\fakepath \ prefixo
<!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>