Entrée du fichier Bootstrap 4

Question

J'ai du mal avec le navigateur de fichiers de bootstrap 4. Si j'utilise custom-file-control, je verrai Choose file value tout le temps. https://v4-alpha.getbootstrap.com/components/forms/#file-browser

J'aimerais modifier la valeur de "Choose File" après que le fichier ait été choisi. Cette valeur est en fait cachée dans le css .custom-file-control:lang(en)::after et je ne sais pas comment y accéder et le modifier en javascript. Je peux obtenir la valeur du fichier choisi comme ceci :

document.getElementById("exampleInputFile").value.split("\\").pop();

pas je dois changer

.custom-file-control:lang(en)::after {
    content: "Choose file...";
}

en quelque sorte

lien : http://codepen.io/Matoo125/pen/LWobNp

Answer 1

Mise à jour 2021

Bootstrap 5

L'entrée du fichier personnalisé n'existe plus, donc à modifier Choose file... vous devrez utiliser JS ou un CSS comme celui-ci .

Bootstrap 4.4

L'affichage du nom de fichier sélectionné peut également être réalisé en JavaScript. Voici un exemple qui part du principe que l'entrée standard custom-file-input avec étiquette est l'élément frère suivant de l'entrée...

document.querySelector('.custom-file-input').addEventListener('change',function(e){
  var fileName = document.getElementById("myInput").files[0].name;
  var nextSibling = e.target.nextElementSibling
  nextSibling.innerText = fileName
})

https://codeply.com/p/LtpNZllird

Bootstrap 4.1+.

Maintenant, dans Bootstrap 4.1, le texte de l'espace réservé "Choose file..." est défini dans le champ 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>

La modification du texte du bouton "Parcourir" nécessite un peu plus de CSS ou de SASS. Remarquez également comment travaux de traduction en langue en utilisant le lang="" attribut.

.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
}

https://codeply.com/go/gnVCj66Efp (CSS)
https://codeply.com/go/2Mo9OrokBQ (SASS)

Une autre option de Bootstrap 4.1

Vous pouvez également utiliser ceci plugin de saisie de fichiers personnalisés

https://www.codeply.com/go/uGJOpHUd8L/file-input

---

Bootstrap 4 Alpha 6 (Réponse originale)

Je pense qu'il y a deux problèmes distincts ici

<label class="custom-file" id="customFile">
        <input type="file" class="custom-file-input">
        <span class="custom-file-control form-control-file"></span>
</label>

1 - Comment modifier le texte initial de l'espace réservé et du bouton ?

Dans Bootstrap 4, l'élément initial La valeur de l'espace réservé est définie dans le custom-file-control avec un pseudo CSS ::after basé sur le langage HTML. Le bouton de fichier initial (qui n'est pas vraiment un bouton mais y ressemble) est défini par un pseudo élément CSS ::before élément. Ces valeurs peuvent être remplacées par des CSS..

#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}

#customFile .custom-file-control:lang(en)::before {
  content: "Click me";
}

2 - Comment obtenir la valeur du nom de fichier sélectionné, et mettre à jour l'entrée pour montrer la valeur.

Une fois qu'un fichier est sélectionné, la valeur peut être obtenue en utilisant JavaScript/jQuery.

$('.custom-file-input').on('change',function(){
    var fileName = $(this).val();
})

Cependant, comme le texte de remplacement pour l'entrée est un pseudo-élément, il n'y a pas de moyen facile de manipuler ceci avec Js/jQuery . Vous pouvez toutefois disposer d'une autre classe CSS qui cache le pseudo contenu une fois que le fichier est sélectionné...

.custom-file-control.selected:lang(en)::after {
  content: "" !important;
}

Utilisez jQuery pour faire basculer l'affichage de l'écran. .selected sur le .custom-file-control une fois que le fichier est sélectionné. Cela permettra de masquer la valeur initiale de l'espace réservé. Ensuite, mettez la valeur du nom de fichier dans le champ .form-control-file span...

$('.custom-file-input').on('change',function(){
  var fileName = $(this).val();
  $(this).next('.form-control-file').addClass("selected").html(fileName);
})

Vous pouvez ensuite gérer le téléchargement ou la re-sélection des fichiers selon les besoins.

Démonstration sur Codeply (alpha 6)

Answer 2

Je l'ai résolu de cette façon

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); 
});

Note : Merci à ajax333221 pour avoir mentionné le .text-truncate qui masquera le débordement dans l'étiquette si le nom du fichier sélectionné est trop long.

Answer 3

A partir de Bootstrap 4.3 vous pouvez modifier le texte de l'espace réservé et du bouton à l'intérieur de la balise label :

<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>

Answer 4

Pour changer la langue du navigateur de fichiers :
Comme alternative à ce que ZimSystem mentionné (remplacer le CSS), une solution plus élégante est suggérée par la documentation de bootstrap : construire vos styles bootstrap personnalisés en ajoutant des langages dans SCSS
Lisez l'article ici : https://getbootstrap.com/docs/4.0/components/forms/#file-browser

Note Vous devez avoir l'attribut lang correctement défini dans votre document pour que cela fonctionne.

Pour la mise à jour de la valeur lors de la sélection du fichier :
Vous pourriez le faire avec du js en ligne comme ceci :

   <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>

Note : le .split('\\').slice(-1)[0] supprime la partie C:\fakepath\ préfixe

Answer 5

J'ajoute simplement ceci dans mon fichier CSS et cela fonctionne :

.custom-file-label::after{content: 'New Text Button' !important;}