Faire un input type="files" esthetiquement beau

Résolu/Fermé

jeann_9499 Messages postés 10 Date d'inscription vendredi 18 décembre 2020 Statut Membre Dernière intervention 30 décembre 2020 - Modifié le 18 déc. 2020 à 15:13
jordane45 Messages postés 38390 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 janvier 2025 - 18 déc. 2020 à 20:48

Bonjour, j'ai un petit problème j'essaye de faire un input type files mais sans avoir un submit
Je l'explique j'ai un script en js qui permet d'envoye le form automatiquement quand le form et complet

Code

//html
<form name="myform" action="" method="POST" enctype="multipart/form-data">
                                                    <div class="form-group">
                                                        <label> documents justificatifs :</label>
                                                        <input class="form-control" onchange="this.form.submit();" type="file"  name="files" id="fichier" size="30" accept="image/png, image/jpg, image/jpeg, application/pdf">
                                                    </div>
                                                </form>

Ce qui donne ::

Mais ce que j'aimerai fait c'est remplacer l'emplacement input type="files" par un icon
Exemple :

Quand je clique sur l'icon + le rechercheur de files s'ouvre et que quand je selectionne mon doc et que je valide, le form s'envoye automatiquement.

A voir également:

Faire un input type="files" esthetiquement beau
Clear type - Guide
Input not supported - Forum Ecran
Input signal not found ✓ - Forum Matériel & Système
Recover my files pc - Télécharger - Récupération de données
Bin files - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38390 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 janvier 2025 4 731
18 déc. 2020 à 16:23

Bonjour,

Une rapide recherche sur le net, ou même ici, t'aurai permis de trouver des discussions traitant de cela.
Pour ce qui est de remplacer le champ input file par une image, par exemple
https://forums.commentcamarche.net/forum/affich-36979883-mettre-la-fonction-upload-sur-l-icone#8

Pour ce qui est du submit (ce qui implique un rechargement de la page) là aussi, des discussions, exemples, tutos .. foisonnent sur le net...
https://www.google.com/search?q=javascript+submit+form

Mais si tu veux éviter de recharger la page via un submit, je t'invite à regarder du côté de l'ajax
https://www.google.com/search?q=upload+file+ajax

jeann_9499 Messages postés 10 Date d'inscription vendredi 18 décembre 2020 Statut Membre Dernière intervention 30 décembre 2020
18 déc. 2020 à 18:31

Merci justement j'ai regarder sur internet mais comme je ne suis pas très fort en anglais et que la plupart des tutos sont en anglais je galere

j'ai tester le code que vous avez envoye a l'autre personne mais moi j'ai a la place un label et non une image c'est un icons issue de livicon https://livicons.com/

code


<body>
    <style>
    .image-upload > input {
        display: none;
    }

    .image-upload img {
        width: 80px;
        cursor: pointer;
    }
    </style>


    <form action="" name="test" method="post" enctype="multipart/form-data">
      <div class="image-upload">
          <label for="file-input">
              <label class="livicon-evo" data-options=" name: morph-eye-open-close.svg; size: 25px "></label>
          </label>

          <input id="file-input" name="monfichier" type="file"/>
      </div>
      <input type="submit" name="go" value="go">
    </form>
</body>

jordane45 Messages postés 38390 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 janvier 2025 4 731 > jeann_9499 Messages postés 10 Date d'inscription vendredi 18 décembre 2020 Statut Membre Dernière intervention 30 décembre 2020
18 déc. 2020 à 20:48

Tu dois pouvoir faire un truc du genre

<form action="" name="test" method="post" enctype="multipart/form-data">
      <div class="image-upload">
          <label for="file-input" class="livicon-evo" data-options=" name: morph-eye-open-close.svg; size: 25px ">
          <input id="file-input" name="monfichier" type="file"/>
      </div>
      <input type="submit" name="go" value="go">
    </form>

Discussions similaires

input signal out of range

Erreur d'exécution 13 Incompatibilité de type

comment désactiver out of range

Faiblesse des pokémon spectre

No video input après mise en veille