Comment personnaliser le composant d'entrée de fichier de Bootstrap 4 ?

Contourner les limitations de l'entrée de fichier de Bootstrap 4

Bootstrap 4 fournit un composant d'entrée de fichier personnalisé pour simplifier la sélection de fichiers pour les utilisateurs. Cependant, si vous souhaitez personnaliser le texte de l'espace réservé « Choisir un fichier... » ou afficher le nom du fichier choisi, vous pourriez rencontrer certains défis.

Modification des espaces réservés dans Bootstrap 4.1 et versions ultérieures

Depuis Bootstrap 4.1, le texte d'espace réservé réside dans l'élément custom-file-label. Vous pouvez le remplacer avec CSS :

<code class="css">.custom-file-label::after {
  content: "Select file...";
}</code>

Modifier le texte du bouton de fichier

Bootstrap 4.1 n'offre pas de méthode simple pour modifier le texte du bouton de fichier. Pour y parvenir, pensez à ajouter un style personnalisé :

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

Affichage du nom du fichier sélectionné dans Bootstrap 4.4

Bootstrap 4.4 vous permet d'afficher le nom du fichier choisi en utilisant simplement JavaScript :

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

Options pré-Bootstrap 4.1 :

Masquage de l'espace réservé initial :

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

Affichage du nom de fichier sélectionné :

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

Ces approches offrent une flexibilité dans la personnalisation du composant d'entrée de fichier de Bootstrap 4, vous permettant de l'adapter à vos besoins spécifiques.

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!