Comment mettre à jour dynamiquement les étiquettes d'entrée de fichier Bootstrap 4 ?

Démarrer avec Bootstrap 4 Bootbox

Comprendre le défi

Dans Bootstrap 4, le composant d'entrée de fichier personnalisé présente un étiquette constante "Choisir un fichier", quelle que soit la sélection du fichier. Pour mettre à jour dynamiquement cette étiquette avec le nom du fichier choisi, une compréhension de la manipulation JavaScript et CSS est essentielle.

La solution de saisie de fichiers Bootstrap 4

Version 4.5 et ci-dessus :

• La saisie de fichiers personnalisés n'est plus disponible. Pour personnaliser le texte du bouton de fichier, CSS ou JavaScript doivent être utilisés.

Version 4.1 et supérieure :

• Le texte de l'espace réservé réside dans le fichier personnalisé -élément file-label.

• Définissez un texte d'étiquette personnalisé via CSS :

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

  Copier après la connexion

Alternative pour Bootstrap 4.1 et supérieur :

• Utilisez un plugin d'entrée de fichier personnalisé, tel que : https://www.codeply.com/go/uGJOpHUd8L/file-input

Original Solution pour Bootstrap 4 Alpha 6 :

Personnalisation de l'espace réservé initial et du texte du bouton :

• Remplacer l'espace réservé par défaut et le texte du bouton à l'aide de CSS :

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

  Copier après la connexion

Récupération du nom de fichier et mise à jour de la valeur d'entrée :

• Utilisez JavaScript/jQuery pour obtenir le fichier sélectionné name :

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

  Copier après la connexion

• Masquer le texte de l'espace réservé lorsqu'un fichier est choisi, à l'aide d'une classe CSS :

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

  Copier après la connexion

• Basculer le CSS classe sur la sélection de fichier et insérez le nom du fichier dans la durée form-control-file :

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

  Copier après la connexion

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!