web-dev-qa-db-fra.com

Entrée de fichier Bootstrap 4

Je me bats avec le navigateur de fichiers bootstrap 4. Si j'utilise custom-file-control, je verrai tout le temps Choisir la valeur du fichier. https://v4-alpha.getbootstrap.com/components/forms/#file-browser

Je voudrais changer la valeur de choisir le fichier après que le fichier ait été choisi. Cette valeur est actuellement cachée dans css .custom-file-control:lang(en)::after et je ne sais pas comment y accéder et la modifier en javascript. Je peux obtenir la valeur du fichier choisi comme ceci:

document.getElementById("exampleInputFile").value.split("\\").pop();

non j'ai besoin de changer 

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

en quelque sorte

lien: http://codepen.io/Matoo125/pen/LWobNp

javascriptjquerycsstwitter-bootstrapbootstrap-4
32
Matej Vrzala M4

Mise à jour 2018

Bootstrap 4.1

Maintenant, le texte de substitution "Choisir le fichier ..." est défini dans le custom-file-label:

<div class="custom-file" id="customFile" lang="es">
        <input type="file" class="custom-file-input" id="exampleInputFile" aria-describedby="fileHelp">
        <label class="custom-file-label" for="exampleInputFile">
           Select file...
        </label>
</div>

Changer le texte du bouton "Parcourir" nécessite un peu plus de CSS ou de SASS.

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

https://www.codeply.com/go/gnVCj66Efp (CSS)
https://www.codeply.com/go/2Mo9OrokBQ (SASS)

Notez également comment la traduction fonctionne en utilisant l’attribut lang="".

Bootstrap 4 Alpha 6

Je pense qu'il y a 2 questions distinctes ici ..

<label class="custom-file" id="customFile">
        <input type="file" class="custom-file-input">
        <span class="custom-file-control form-control-file"></span>
</label>

1 - Comment modifier le texte fictif initial et le texte du bouton

Dans Bootstrap 4, la valeur d'espace réservé initial est définie sur custom-file-control avec un élément pseudo ::after CSS basé sur le langage HTML. Le bouton de fichier initial (qui n'est pas vraiment un bouton mais qui en a l'air) est défini avec un élément pseudo ::before CSS. Ces valeurs peuvent être remplacées avec CSS.

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

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

2 - Comment obtenir la valeur du nom de fichier sélectionné et mettre à jour l'entrée pour l'afficher.

Une fois qu'un fichier est sélectionné, la valeur peut être obtenue à l'aide de JavaScript/jQuery.

$('.custom-file-input').on('change',function(){
    var fileName = $(this).val();
})

Cependant, comme le texte de substitution pour l'entrée est un pseudo-élément, il n'y a pas de moyen facile de le manipuler avec Js/jQuery . Vous pouvez cependant avoir une autre classe CSS qui cache le pseudo contenu une fois le fichier sélectionné ... 

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

Utilisez jQuery pour basculer la classe .selected sur le .custom-file-control une fois le fichier sélectionné. Cela cachera la valeur de marque de réservation initiale. Ensuite, mettez la valeur du nom de fichier dans le .form-control-file span ...

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

Vous pouvez ensuite gérer le téléchargement ou la re-sélection de fichiers selon vos besoins.

Démo sur Codeply (alpha 6)

37
Zim

Je viens de le résoudre de cette façon

Html:

<div class="custom-file">
   <input id="logo" type="file" class="custom-file-input">
   <label for="logo" class="custom-file-label text-truncate">Choose file...</label>
</div>

JS:

$('.custom-file-input').on('change', function() { 
   let fileName = $(this).val().split('\\').pop(); 
   $(this).next('.custom-file-label').addClass("selected").html(fileName); 
});

Note: Merci à ajax333221 pour avoir mentionné la classe .text-truncate qui masquera le débordement dans l’étiquette si le nom du fichier sélectionné est trop long.

43
Elnoor

Pour changer la langue du navigateur de fichiers:
Comme alternative à ce que ZimSystem mentionne (remplace le CSS), une solution plus élégante est suggérée par la documentation d'amorçage: créez vos styles d'amorçage personnalisés en ajoutant des langues dans SCSS
Lisez à ce sujet ici: https://getbootstrap.com/docs/4.0/components/forms/#file-browser

Note: vous devez avoir l'attribut lang correctement défini dans votre document pour que cela fonctionne.

Pour mettre à jour la valeur lors de la sélection du fichier:
Vous pouvez le faire avec js en ligne comme ceci:

   <label class="custom-file">
      <input type="file" id="myfile" class="custom-file-input" onchange="$(this).next().after().text($(this).val().split('\\').slice(-1)[0])">
      <span class="custom-file-control"></span>
   </label>

Note: la partie .split('\\').slice(-1)[0] supprime le préfixe C:\fakepath \

5
Razvan Pocaznoi

À partir de Bootstrap 4.3 vous pouvez modifier le texte d’espace réservé et de bouton à l’intérieur de la balise label:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="custom-file">
  <input type="file" class="custom-file-input" id="exampleInputFile">
  <label class="custom-file-label" for="exampleInputFile" data-browse="{Your button text}">{Your placeholder text}</label>
</div>

0
Andrei Veshtard

Solution basée sur la réponse @Elnoor, mais fonctionnant avec plusieurs entrées de formulaire de téléchargement et sans le "fakepath hack":

HTML:

<div class="custom-file">
    <input id="logo" type="file" class="custom-file-input" multiple>
    <label for="logo" class="custom-file-label text-truncate">Choose file...</label>
</div>

JS:

$('input[type="file"]').on('change', function () {
    let filenames = [];
    let files = document.getElementById('health_claim_file_form_files').files;

    for (let i in files) {
        if (files.hasOwnProperty(i)) {
            filenames.Push(files[i].name);
        }
    }

    $(this).next('.custom-file-label').addClass("selected").html(filenames.join(',    '));
});
0
Sicaa