web-dev-qa-db-fra.com

l’entrée de fichier bootstrap 4 n’affiche pas le nom du fichier

J'ai un problème avec la classe d'entrée de fichier personnalisé dans Bootstrap 4 . Après avoir choisi le fichier que je veux télécharger, le nom de fichier ne s'affiche pas.

J'utilise ce code:

<div class="input-group mb-3">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile02">
    <label class="custom-file-label" for="inputGroupFile02">Choose file</label>
  </div>
  <div class="input-group-append">
    <button class="btn btn-primary">Upload</button>
  </div>
</div>

Avez-vous une idée de comment résoudre ce problème sans que cela devienne trop compliqué?

htmlcssfile-uploadbootstrap-4
27
Terchilă Marian

Vous devez utiliser javascript pour afficher le nom du fichier choisi, comme indiqué dans la documentation: https://v4-alpha.getbootstrap.com/components/forms/#file-browser

Ici vous pouvez trouver la solution: Bootstrap 4 File Input

C'est le code de votre exemple:

<html lang="en">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="input-group mb-3">
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="inputGroupFile02"/>
                <label class="custom-file-label" for="inputGroupFile02">Choose file</label>
            </div>
            <div class="input-group-append">
                <button class="btn btn-primary">Upload</button>
            </div>
        </div>
        <script>
            $('#inputGroupFile02').on('change',function(){
                //get the file name
                var fileName = $(this).val();
                //replace the "Choose a file" label
                $(this).next('.custom-file-label').html(fileName);
            })
        </script>
    </body>
</html>
31
debe

J'ai utilisé pour la même chose:

<script type="application/javascript">
    $('input[type="file"]').change(function(e){
        var fileName = e.target.files[0].name;
        $('.custom-file-label').html(fileName);
    });
</script>
16
Anuja Patil

La réponse d'Anuja Patil ne fonctionne qu'avec une seule entrée de fichier sur une page. Cela fonctionne s'il y en a plus d'un. Cet extrait montrera également tous les fichiers si multiple est activé.

<script type="text/javascript">

    $('.custom-file input').change(function (e) {
        var files = [];
        for (var i = 0; i < $(this)[0].files.length; i++) {
            files.Push($(this)[0].files[i].name);
        }
        $(this).next('.custom-file-label').html(files.join(', '));
    });

</script>

Notez que $(this).next('.custom-file-label').html($(this)[0].files.join(', ')); ne fonctionne pas. C'est pourquoi la boucle for est nécessaire.

Si vous ne travaillez jamais avec plusieurs fichiers lors du téléchargement de fichier, cet extrait de code plus simple peut être utilisé.

<script type="text/javascript">

    $('.custom-file input').change(function (e) {
        $(this).next('.custom-file-label').html(e.target.files[0].name);
    });

</script>
10
VDWWD

Lorsque vous avez plusieurs fichiers, l’idée est d’afficher uniquement le premier fichier et le numéro des noms de fichiers masqués.

$('.custom-file input').change(function() {
    var $el = $(this),
    files = $el[0].files,
    label = files[0].name;
    if (files.length > 1) {
        label = label + " and " + String(files.length - 1) + " more files"
    }
    $el.next('.custom-file-label').html(label);
});
0
Vassilis

Si vous le souhaitez, vous pouvez utiliser le plug-in Bootstrap recommandé pour dynamiser votre entrée de fichier personnalisé: https://www.npmjs.com/package/bs-custom-file-input

Ce plugin peut être utilisé avec ou sans jQuery et fonctionne avec React an Angular

0
Johann-S

Ce code fonctionne pour moi:

<script type="application/javascript">
    $('#elementID').change(function(event){
        var fileName = event.target.files[0].name;
        if (event.target.nextElementSibling!=null){
            event.target.nextElementSibling.innerText=fileName;
        }
    });
</script>
0
Jorge Santos Neill