Comment modifier l'affichage du sélecteur de fichiers dans Bootstrap ?

Entrée de fichier Bootstrap : modification de l'affichage du sélecteur de fichiers

Lors de l'utilisation du navigateur de fichiers de Bootstrap 4, vous pouvez rencontrer le problème d'affichage par défaut de « Choisir fichier..." texte. Ce texte est défini à l'aide de CSS dans l'élément .custom-file-control, qui peut être difficile à modifier à l'aide de JavaScript.

Bootstrap 5

Dans Bootstrap 5, personnalisé l'entrée du fichier a été supprimée. Par conséquent, la modification de l'affichage du sélecteur de fichiers nécessite des techniques CSS ou JavaScript personnalisées.

Bootstrap 4.4

Pour afficher le nom de fichier sélectionné dans Bootstrap 4.4, JavaScript peut être utilisé :

<code class="javascript">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;
});</code>

Bootstrap 4.1

Dans Bootstrap 4.1 et versions ultérieures, l'espace réservé "Choisir un fichier..." est défini dans l'élément .custom-file-label :

<code class="html"><label class="custom-file-label" for="exampleInputFile">
  Select file...
</label></code>

La modification du texte du bouton peut être effectuée avec CSS :

<code class="css">.custom-file-input ~ .custom-file-label::after {
  content: "Button Text";
}</code>

Réponse originale (Bootstrap 4 Alpha 6)

Pour modifier l'espace réservé initial et le texte du bouton, CSS peut être utilisé :

<code class="css">#customFile .custom-file-control:lang(en)::after {
  content: "Select file...";
}
#customFile .custom-file-control:lang(en)::before {
  content: "Click me";
}</code>

Pour récupérer le nom de fichier sélectionné et mettre à jour l'affichage, JavaScript peut être utilisé :

<code class="javascript">$('.custom-file-input').on('change',function(){
  var fileName = $(this).val();
});</code>

Cependant, comme le texte de l'espace réservé est un pseudo-élément, JavaScript ne peut pas le modifier directement. Une solution de contournement consiste à ajouter une classe CSS qui masque le pseudo-contenu et à placer le nom du fichier dans l'étendue .form-control-file :

<code class="css">.custom-file-control.selected:lang(en)::after {
  content: "" !important;
}</code>

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!