Comment modifier le texte « Choisir un fichier... » dans l'entrée de fichier Bootstrap 4 ?

Entrée de fichier Bootstrap 4 : personnalisation de « Choisir un fichier »...

Les entrées de fichier personnalisées dans Bootstrap 4 ont un texte d'espace réservé « Choisir un fichier » ..." qui peut être difficile à changer. Explorons deux problématiques distinctes :

1. Modification de l'espace réservé initial et du texte du bouton

Bootstrap 4 définit l'espace réservé initial et le texte du bouton via des pseudo-éléments CSS basés sur le langage HTML. Pour remplacer ces valeurs, utilisez du CSS personnalisé :

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

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

2. Affichage du nom du fichier sélectionné

Pour obtenir le nom du fichier sélectionné, utilisez JavaScript/jQuery :

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

Cependant, la manipulation du texte d'espace réservé de l'entrée n'est pas directement possible. Au lieu de cela, utilisez une autre classe CSS pour masquer l'espace réservé initial une fois qu'un fichier est sélectionné et afficher le nom du fichier dans un élément à proximité :

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

Cela masquera le "Choisir un fichier..." par défaut. texte et afficher le nom du fichier sélectionné. Vous pouvez ensuite gérer d'autres actions telles que le téléchargement de fichiers ou la resélection selon vos besoins.

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!