Trucsweb.com

Trucsweb.com

CSS

Bootstrap

RDFFav

Bootstrap 4.2 - Saisie de fichier (File browser)

Il n’y a pas à dire, Bootstrap coupe souvent les coins ronds quand il est question de documenter le plugiciel d’un tiers parti.UI,File browser, input,form,file,type,upload,téléversementBootstrap 4.2 - Saisie de fichier (File browser)

Upload - File browser

Il n’y a pas à dire, Bootstrap coupe souvent les coins ronds quand il est question de documenter le plugiciel d’un tiers parti. La saisie de fichier est un bel exemple. Particulièrement Bootstrap 4, même si la version 4.2 améliore avec le temps la documentation et surtout les exemples.

Au-delà de la « normalisation » de l’ergonomie et des IU (interface usager) pourquoi utilise-t-on Bootstrap si ce n’est de la facilité et la rapidité d’utilisation ? Alors on n’attend rien de moins en lisant la documentation. Un simple copier-coller suffirait et à la limite un petit JavaScript caché en bas de la page. Au pire, on scrute le code source pour mieux comprendre.

Mais pas avec la saisie de fichier (input de type « file »). Bootstrap se contente d’écrire « nous utilisons bs-custom-file-input dans ce document ». Fait-il partie du bundle ? He non ! Et le site qui l’offre, tout en étant encore plus succinct, offre bien plus qu’un simple input...

Pire, Bootstrap termine la documentation sur ce bout de phrase « Bootstrap also provides a way to translate the “Browse” text in HTML with the data-browse attribute which can be added to the custom input label ». Give me a break ! On a beau suivre le document qui explique le principe, on finit par refaire le tout maison. Plus simple, plus rapide et sans « plug-in » !

Je suis plutôt pur JavaScript (Vanilla) mais le minimum jQuery est déjà requis avec Bootstrap 4. Alors aussi bien l’utiliser !

1. La balise

Exactement comme l’exemple de Bootstrap 4.1. Noter l’ajout de l’attribut « accept »...

<div class="custom-file">
  <input type="file" class="custom-file-input" id="hFichier" name="hFichier" lang="fr" accept=".jpg,.jpeg,.gif,.png" />
  <label class="custom-file-label" for="hFichier">Sélectionner un fichier</label>
</div>
2. En français

Un petit CSS pour modifier le contenu du bouton généré par Bootstrap en anglais peu importe la langue du navigateur. Et noter l’utilisation de l’attribut « lang » suggéré par Bootstrap.

.custom-file-input ~ .custom-file-label:lang(fr)::after {
  content: "Choisir...";
}
.custom-file-input ~ .custom-file-label:lang(es)::after {
  content: "Elegir...`";
}
3. Le JavaScript

Une fois le fichier sélectionné, il faut manuellement l’indiquer. L’avantage avec ce script, et les autres disponibles sur le Web sont qu’il est générique pour toutes les saisies de fichier du document. Et il retourne seulement le titre sans le chemin d’accès (c:\\dossier_X\monfichier.ext).

<script>
  $("input[type=file]").change(function (e){$(this).next('.custom-file-label').text(e.target.files[0].name);})
</script>

Ou la fonction que l’on retrouve sur le Web :

$("input[type=file]").change(function () {
  var fieldVal = $(this).val();
  if (fieldVal != undefined || fieldVal != "") {
    $(this).next(".custom-file-label").text(fieldVal);
  }
});

C’est aussi simple que ça ! Pourquoi Bootstrap ne l’indique pas tout simplement dans sa documentation restera pour moi un mystère...

Code complet
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <title>Bootstrap 4.2 - Saisie de fichier (File browser) - Trucsweb.com</title>
    <style>
    .custom-file-input ~ .custom-file-label:lang(fr)::after {
      content: "Choisir...";
    }
    .custom-file-input ~ .custom-file-label:lang(es)::after {
      content: "Elegir...`";
    }
    </style>
  </head>
  <body>
    <h1>Bootstrap 4.2 - Saisie de fichier (File browser)</h1>
    <form method="post" name="oTeleversement" id="oTeleversement" action="script.php" enctype="multipart/form-data">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="hFichier" name="hFichier" lang="fr" accept=".jpg,.jpeg,.gif,.png" />
      <label class="custom-file-label" for="hFichier">Sélectionner un fichier</label>
    </div>
    </form>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <script>
      $("input[type=file]").change(function (e){$(this).next('.custom-file-label').text(e.target.files[0].name);})
    </script>
  </body>
</html>
Autres solutions

Bootstrap c’est bien, mais c’est essentiellement visuel, il n’est question que d’interface usager (IU). Il existe sur le Web des tas d’outils tous plus performants les uns que les autres pour gérer de façon encore plus pointue le téléversement de document. Un très complet que j’affectionne particulièrement est « bootstrap-fileinput ».


Transfert sur le serveur

Pour éviter de couper moi aussi les coins ronds, il faut ajouter qu’il ne s’agit que d’une interface usager (IU). Le transfert physique du fichier, le téléversement (upload), ne fait pas partie de ce tutoriel. Pour ce faire, vous devez avoir accès au serveur qui utilise généralement une composante. C’est une autre histoire qui dépend entièrement de votre serveur et de la technologie utilisée (PHP, ASP, .NET, Pyton...). N’oubliez pas que votre formulaire doit absolument être soumis encodé en binaire pour téléverser un fichier (enctype="multipart/form-data")...

Références
, Analyste programmeurConception oznogco multimédia (https://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

    10/10 sur 1 revues.
           Visites : 18348 - Pages vues : 19007

    En ligne depuis 27 ans (1997-2024)

    Le plus vieux site francophone pour freelances!

    Il y a 10 types de personnes, ceux qui comprennent le binaire et ceux qui ne le comprennent pas ;-)

    RSS

    Aider les Trucsweb

    PayPal - la solution de paiement en ligne la plus simple et la plus sécurisée !
    aiement en ligne sécurisée PayPal Vérifié par PayPal

    Bootstrap - Trucsweb

    [Photo][Photo][Photo][Photo][Photo][Photo][Photo][Photo][Photo][Photo][Photo][Photo][Photo][Photo][Photo]

    Formulaire Web - Trucsweb

    [Photo][Photo][Photo][Photo][Photo]
    Étiquettes
    UIFile browserinputformfiletypeuploadtéléversement
    outils
    1. Generateur Trucsweb
    2. Glossaire
    3. jQuery : Équivalent Javascript
    4. HTML5 : Liste des balises
    5. HTML5 : Formation pour débutant
    6. AbuseIPDB AbuseIPDB
    7. Phishing-initiative Initiative hameçonnage (Phishing initiative)
    Références
    1. W3C HTML5
    2. W3C HTML 4.0
    3. W3C CSS Level 3
    4. W3C CSS LEVEL 2.1
    5. W3C XHTML 1.0
    6. W3C SMIL 2.0
    7. W3C XML 1.0
    8. W3C The Extensible Stylesheet Language Family (XSL)
    9. W3C XPath 3.0
    10. W3C XSL Version 1.1
    11. W4C XSLT 2.0
    12. RFC Editor Site
    13. Web Design Group
    14. Treehouse: Development Courses
    15. W3Schools
    16. W3CTutorial
    17. XML Cover Pages
    18. The W3C Markup Validation Service
    19. Validateur de syntaxe Javascript Esprima
    20. Validateur JavaScript Lint
    21. Le meilleurs Validateur JavaScript Code Beautify
    22. Real Favicon checker
    23. Local Business Schema Generator
    24. Générateur de microdonnées
    25. Testing Tool — Google Developers
    26. Google - Outil de test du balisage d'e-mails
    27. Google - Search Console (webmasters/tools)
    28. PageSpeed Insights
    29. RDFa Distiller and Parser
    30. RDF extracteur (pyRDFa)
    31. Soumettre votre URL à Google
    32. Soumettre votre URL à Bing
    33. Soumettre votre URL à Yahoo
    34. FXSL - Functional Programming Library for XSLT
    35. Wikipedia - Internet media type
    1. Mozilla Developer Network JavaScript reference
    2. VBScript Quick Reference
    3. ASP.NET Reference
    4. JCSS & Javascript Character Entity Calculator
    5. JScript Reference
    6. Hammer.min.js
    7. ASP Object Quick Ref.
    8. ADO API Reference
    9. IIS Configuration Reference
    10. MSDN Library
    11. Bootstrap
    12. Bootsnipp
    13. Bootstrap Cheat Sheets
    14. Iconic
    15. Zurb Foundation 5
    16. Skeleton
    17. Responsive CSS Framework Comparison
    18. HTML5 Boilerplate
    19. Modernizr
    20. Normalize.css
    21. Eric Meyer's CSS reset
    22. Bootstrap (français)
    23. Jasny Bootstrap
    24. jQuery
    25. DataTables | Table plug-in for jQuery
    1. HTML 4.0 code de caractères
    2. Unicode fonts
    3. Manuel PHP
    4. Documentation Perl
    5. ActionScript® 3.0 Reference
    6. MySQL Reference Manuals
    7. Find My Facebook Page ID
    8. Get a User's Twitter ID
    9. Share Link Generator!
    10. Validation de courriel
    11. G Suite Toolbox Check MX
    12. G Suite Toolbox Messageheader
    13. SPF Syntax Validator
    14. SPF Record Testing Tools
    15. La Loi canadienne anti-pourriel
    16. DNS / nameserver (requête en ligne)
    17. Whatsmydns.net (Propagation DNS globale)
    18. MXtoolbox.com
    19. DNSstuff.com
    20. SHAAAAAAAAAAAAA - Détection de certificat SHA-1
    21. Décoder Hachage MD5, SHA-1, LM, NTML
    22. Get Lat Long from Address
    23. Java Language Spec.
    24. Sun Java
    25. JSP Standard Tag Library
    26. C++ Language Reference
    27. C# Reference
    28. Les Navigateurs
    29. Terminologie d'Internet
    30. IP Location tools
    31. Open Port Check Tool
    32. Webfont generator
    33. HSL picker
    34. Zone Accro
    35. Dictionnaire de la langue française de l'internaute.com
    36. Glossaire informatique anglais/français
    37. Correcteur d'orthographe et grammaire Reverso
    38. Google Traduction
    39. JavaScript: Escaping Special Characters
    40. Online JavaScript/CSS Compression Using YUI Compressor
    41. Minify your CSS
    42. JS & CSS Minifier
    43. CSS Inliner Tool
    44. Base64 encoder and decoder
    45. Hachage MD5, SHA-1, LM, NTML
    46. Javascript HTML Page Encoder
    47. Winmail.dat Reader
    Oznog

    Blogueur, analyste-programmeur et designer Web!
    Conception Oznogco Multimédia
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @