surmonter les défis de l'entrée de fichier bootstrap 4

Dans Bootstrap 4, le navigateur de fichier présente le texte persistant "Choisissez le fichier ..." Malgré la sélection des fichiers. Ce problème découle de la valeur cachée au sein de la classe CSS de contrôle de file personnalisé. Bien qu'il soit possible de récupérer la valeur du fichier choisi à l'aide de JavaScript, la modification du texte de placement peut être plus complexe. Pour modifier ce texte, ajoutez simplement CSS ou SASS personnalisés comme suit:

. Custom-File-Input ~ .Custom-file-Label :: After { Contenu: "Button Text"; }

adressant la valeur de placement caché

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

bootstrap 4 alpha 6 (réponse originale)

1. Modification du texte de placement et du bouton initial:

Le placeur et le texte du bouton initial sont stockés dans des pseudo-éléments CSS. To customize them, override the default values ​​using the :lang(en)::after and :lang(en)::before selectors, respectively.

#customFile .custom-file-control:lang(en)::after { Contenu: "Sélectionner le fichier ..."; } #CustomFile .Custom-file-Control: Lang (en) :: avant { Contenu: "Cliquez sur moi"; }

2. Récupération du nom de fichier sélectionné et mise à jour de l'entrée:

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

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

. Custom-file-control.selected: Lang (en) :: After { Contenu: ""! IMPORTANT; }

Lors de la sélection de fichiers, bascule la classe .Selected sur le .Custom-file-control à l'aide de jQuery pour masquer le placeur de place var filename = $ (this) .val (); $ (this) .next ('. form-control-file'). addClass ("sélectionné"). html (nom de fichier); })

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

L'entrée de fichier personnalisée a été supprimée dans Bootstrap 5. Pour modifier le texte du placeur de placement, vous pouvez utiliser JavaScript ou CSS personnalisé. Par exemple:

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