Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    août 2019
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : août 2019
    Messages : 6
    Points : 5
    Points
    5

    Par défaut Personnaliser les input file

    Bonjour, je reviens vers vous car j'ai encore des problèmes avec mon CSS, voila mon formulaire :
    Nom : form1.png
Affichages : 43
Taille : 15,1 Ko
    et le code :
    Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    echo "<form id=\"ajoutImg\" action=\"ajout-image.php\" method=\"POST\" enctype=\"multipart/form-data\">";				
    				echo '<p><strong>Ajouter des images (format PNG/JPG, taille maximale 1Mo).</strong></p>';
    				echo '<p>Ajouter une image : <input id="btnParcourir" type="file" name="img1" accept="image/png, image/jpeg" /><button class="viderChamps" type="button" onclick=document.getElementsByName("img1")[0].value="">Vider</button ></p>'; 
    				echo '<p>Ajouter une image deuxième image : <input id="btnParcourir" type="file" name="img2" accept="image/png, image/jpeg" /><button class="viderChamps" type="button" onclick=document.getElementsByName("img2")[0].value="">Vider</button ></p>'; 
    				echo '<p>Et une troisième : <input id="btnParcourir" type="file" name="img3" accept="image/png, image/jpeg" /><button class="viderChamps" type="button" onclick=document.getElementsByName("imgFruit")[0].value="">Vider</button ></p>'; 
     
    				echo '<br /><br /><input id="valider" type="submit" value="Valider">';
     
    				echo "</form>";
    Il y a deux choses que je voudrais faire
    premièrement, aligner les boutons automatiquement au bout du texte le plus long pour obtenir quelque chose de ce genre :
    Nom : form2.png
Affichages : 43
Taille : 14,9 Ko
    et ensuite je voudrais personnaliser les input file, en faisant des recherches j'ai vu que ce n'était pas possible de manière directe, j'ai vu différentes manières comme en utilisant un label mais le problème de ces solutions c'est qu'on ne voit plus le nom de fichier importé.
    Y a t il une solution actuellement pour le faire directement (les tutos que j'ai vu datent de 2017)
    sinon comment peut on faire pour personnaliser le bouton et avoir le nom du fichier à côté?
    Merci.

  2. #2
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    août 2019
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : août 2019
    Messages : 6
    Points : 5
    Points
    5

    Par défaut

    J'ai trouvé la solution pour l'alignement, maintenant il me reste à trouver comment modifier les boutons input file.
    Vous avez des idées qui permettent de modifier le bouton tout en gardant le nom du fichier à côté?
    Merci.

  3. #3
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    2 320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 2 320
    Points : 4 480
    Points
    4 480

    Par défaut

    on ne peut pas modifier le bouton par contre on peut le rendre invisible et utiliser un label que l'on peut redessiner comme on veut.

    exemple: (google=>css customise input file)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <input type="file" name="file" id="file" class="inputfile" />
    <label for="file">Choose a file</label>
    css
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    .inputfile {
    	width: 0.1px;
    	height: 0.1px;
    	opacity: 0;
    	overflow: hidden;
    	position: absolute;
    	z-index: -1;
    }
     
    .inputfile + label {
        font-size: 1.25em;
        font-weight: 700;
        color: white;
        background-color: black;
        display: inline-block;
        cursor: pointer;
    }
     
    .inputfile:focus + label,
    .inputfile + label:hover {
        background-color: red;
    }
    si on veut pas de label on peut aussi jouer avec un attribut ::before
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  4. #4
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    août 2019
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : août 2019
    Messages : 6
    Points : 5
    Points
    5

    Par défaut

    Merci pour votre réponse,
    Je connaissais la technique des labels mais le problème c'est que si on utilise cette technique on ne voit plus le nom du fichier importé ce qui je trouve est quand même important car j'ai plusieurs input file sur la page et des bouton pour les vider, ça permet à l'utilisateur de voir ou il en est.
    Il y a une solution en JS qui permet de le faire bien mais comme ce n'est pas une grande priorité je laisserai ceux de base pour le moment.
    Si quelqu'un connait une autre technique qui ne nécessite pas trop de code je suis preneur.
    Merci

  5. #5
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 054
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 054
    Points : 30 672
    Points
    30 672

    Par défaut

    Bonjour,

    1- "input file personnalisé"

    Ça m'a pris 10 secondes :

    2- En allant au plus simple, et en combinant avec le code de psychadelic :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <p>
      <input type="file" name="file" id="file" class="inputfile" onchange="document.getElementById('input_text_file').textContent = this.value" />
      <label for="file">Choose a file</label> <span id="input_text_file"></span>
    </p>
    Mais ça nécessite de mettre des identifiants (id).
    Avec plusieurs input, ça peut devenir pénible...

    3- J'ai donc fait ma petite version perso : https://codepen.io/jreaux62/pen/BaBKgLY
    Plus besoin d'identifiants (id)
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <p>
      <label class="inputfile"><input type="file" name="file1"  />
      Choose file 1</label><span></span>
    </p> 
    <p>
      <label class="inputfile"><input type="file" name="file2"  />
      Choose file 2</label><span></span>
    </p>
    A noter : la classe "inputfile" est sur le label.
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    .inputfile {
      position:relative;
      font-size: 120%;
      color: darkblue;
      background-color: lightblue;
      display: inline-block;
      cursor: pointer;
      padding:5px 10px;
      margin-right:5px;
    }
    .inputfile input {
      position: absolute;
      left:-9999px;
      z-index: -1;
    }
    .inputfile input:focus,
    .inputfile:hover {
        background-color: green;
      color:white;
    }
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    "use strict";
    const inputfiles = document.querySelectorAll('.inputfile input');
    inputfiles.forEach( function(inputfile){
      inputfile.addEventListener('change',function(){
        console.log( inputfile.parentNode.children );
        inputfile.parentNode.nextSibling.textContent = inputfile.value.replace(/^.*[\\\/]/, '');
      });
    });
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  6. #6
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    août 2019
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : août 2019
    Messages : 6
    Points : 5
    Points
    5

    Par défaut

    Merci pour vos réponses,
    J'ai donc utilisé la méthode
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <p>
      <input type="file" name="file" id="file" class="inputfile" onchange="document.getElementById('input_text_file').textContent = this.value" />
      <label for="file">Choose a file</label> <span id="input_text_file"></span>
    </p>

    Je l'ai modifié un peu et elle fonctionne très bien, merci beaucoup.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. filtrer les fichier dans un input file
    Par bailamos dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 08/12/2009, 08h40
  2. [XHTML 1.0] Personnaliser un input type file
    Par sarah65536 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 30/03/2009, 13h47
  3. Un input="file" accepte-t-il les value ?
    Par lodan dans le forum Formulaires
    Réponses: 2
    Dernier message: 09/12/2006, 19h16
  4. IE et les input type=file
    Par bibendum dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 02/03/2006, 17h25
  5. [CSS] personnaliser les boutons des balises INPUT
    Par Leviathan_72 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 08/11/2005, 15h22

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo