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

Question

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

Demandé el 4 de Février, 2018: Quand la question a-t-elle été
44316 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Cette question a déjà des réponses:

Entrée du fichier Bootstrap 4 (5 réponses )

J'ai un problème avec la classe custom-file-input de Bootstrap 4. Après avoir choisi le fichier que je veux télécharger, le nom du fichier n'apparaît 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>

Une idée de la façon dont je peux le réparer sans que ce soit trop compliqué ?

Demandé el 4 de Février, 2018 par Terchilă Marian

Answer 1

5 Réponses

Answer 2

149voto

debe Points 812

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

Vous trouverez ici la solution : Entrée du fichier Bootstrap 4

C'est le code pour 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>

Répondu el 4 de Février, 2018 par debe (812 Points )

0 votes

Puis-je simplement me désengager de cette option et obtenir l'entrée du fichier natif ?

Commenté el 1 de Octobre, 2018 par Victor

13 votes

cet ensemble C:\fakepath\myfile.ext Je suis sous linux, c'est bizarre de voir C:\... pas vraiment une bonne solution.

Commenté el 9 de Novembre, 2018 par Pablo Pazos

11 votes

Vous pouvez manipuler la chaîne pour supprimer "C \fakepath "pour n'avoir que le nom du fichier. var cleanFileName = fileName.replace('C:\\fakepath\\', " ");

Commenté el 30 de Janvier, 2019 par adityaekawade

Afficher 3 autres commentaires

Answer 3

96voto

Anuja D. Points 152

J'ai utilisé ce qui suit 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>

Répondu el 24 de Juillet, 2018 par Anuja D. (152 Points )

4 votes

Ça m'a permis de faire 90% du chemin. Cependant, j'avais plusieurs entrées de fichiers et j'avais besoin de cibler par ID plutôt que par classe.

Commenté el 13 de Mars, 2019 par George Harnwell

11 votes

Si vous avez plusieurs entrées de fichiers, vous pouvez utiliser ceci : $(e.target).siblings('.custom-file-label').html(fileName); au lieu de

Commenté el 24 de Mai, 2019 par Federico G

2 votes

Vous devez utiliser .text(fileName) au lieu de .html(fileName) .

Commenté el 12 de Juillet, 2019 par jor

Afficher 3 autres commentaires

Answer 4

48voto

VDWWD Points 22118

La réponse d'Anuja Patil ne fonctionne qu'avec une seule entrée de fichier sur une page. Ceci fonctionne s'il y en a plus d'un. Ce snippet 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 donc pour cela que le for boucle est nécessaire.

Si vous ne travaillez jamais avec plusieurs fichiers dans le téléchargement de fichiers, vous pouvez utiliser cet extrait plus simple.

<script type="text/javascript">

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

</script>

Répondu el 20 de Août, 2018 par VDWWD (22118 Points )

2 votes

Si quelqu'un annule le téléchargement du fichier, e.target.files sera vide et provoquera une erreur Uncaught TypeError: Cannot read property 'name' of undefined . Si vous vérifiez la longueur de e.target.files vous pouvez éviter l'erreur de la console. Bien que fonctionnellement rien ne soit cassé.

Commenté el 28 de Janvier, 2020 par phyatt

0 votes

@phyatt non, ce n'est pas le cas. Du moins pas dans Edge, Chrome et FireFox.

Commenté el 28 de Janvier, 2020 par VDWWD

1 votes

pour le deuxième exemple d'extrait plus simple. Le premier exemple est parfait.

Commenté el 28 de Janvier, 2020 par phyatt

Afficher 4 autres commentaires

Answer 5

35voto

kejodion Points 437

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

Le meilleur des mondes. Fonctionne sur des entrées créées dynamiquement, et utilise le nom de fichier réel.

Répondu el 12 de Mars, 2019 par kejodion (437 Points )

0 votes

Celui-ci fonctionne comme un charme

Commenté el 28 de Décembre, 2019 par fsevenm

0 votes

Cela fonctionne parfaitement

Commenté el 16 de Juin, 2021 par theodory

Answer 6

10voto

kexxcream Points 759

Cela fonctionne avec Bootstrap 4.1.3 :

<script>
    $("input[type=file]").change(function () {
        var fieldVal = $(this).val();

        // Change the node's value by removing the fake path (Chrome)
        fieldVal = fieldVal.replace("C:\\fakepath\\", "");

        if (fieldVal != undefined || fieldVal != "") {
            $(this).next(".custom-file-label").attr('data-content', fieldVal);
            $(this).next(".custom-file-label").text(fieldVal);
        }
    });
</script>

Répondu el 13 de Mars, 2019 par kexxcream (759 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: