Remplacer l'entrée type=fichier par une image

Question

Comme beaucoup de gens, j'aimerais personnaliser la vilaine input type=file et je sais que cela ne peut se faire sans quelques bidouilles et/ou javascript . Mais le problème est que dans mon cas, les boutons de téléchargement de fichiers ne servent qu'à télécharger des images ( jpeg|jpg|png|gif ), je me demandais donc si je pouvais utiliser un " clickable qui agirait exactement comme un fichier de type "input" (afficherait la boîte de dialogue et le même $_FILE sur la page soumise).
J'ai trouvé une solution de contournement aquí y cette intéressante aussi (mais ne fonctionne pas sur Chrome =/).

Que faites-vous lorsque vous souhaitez donner du style à vos boutons de fichiers ? Si vous avez un point de vue sur le sujet, cliquez sur le bouton réponse ;)

Answer 1

Cela fonctionne très bien pour moi :

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

<div class="image-upload">
  <label for="file-input">
    <img src="https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/128/Downloads-icon.png"/>
  </label>

  <input id="file-input" type="file" />
</div>

En principe, le pour de l'étiquette fait en sorte que cliquer sur l'étiquette revient à cliquer sur l'entrée spécifiée .

De plus, la propriété d'affichage définie sur none permet de ne pas rendre l'entrée du fichier, ce qui la dissimule de manière agréable et propre.

Testé dans Chrome mais selon le site web, il devrait fonctionner sur tous les principaux navigateurs :)

EDITAR: Ajout de JSFiddle ici : https://jsfiddle.net/c5s42vdz/

Answer 2

En fait, cela peut être fait en css pur et c'est assez facile...

Code HTML

<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>

Styles CSS

label.filebutton {
    width:120px;
    height:40px;
    overflow:hidden;
    position:relative;
    background-color:#ccc;
}

label span input {
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}

L'idée est de positionner l'entrée absolument à l'intérieur de votre étiquette. Réglez la taille de la police de l'entrée sur quelque chose de grand, ce qui augmentera la taille du bouton "parcourir". Il faut ensuite procéder par tâtonnements en utilisant les propriétés négatives gauche/haut pour positionner le bouton de navigation derrière l'étiquette.

Lorsque vous positionnez le bouton, réglez l'alpha sur 1. Lorsque vous avez terminé, remettez-le à 0 (pour que vous puissiez voir ce que vous faites !).

Veillez à tester tous les navigateurs, car ils afficheront tous le bouton de saisie à une taille légèrement différente.

Answer 3

Excellente solution de @hardsetting, Mais j'ai fait quelques améliorations pour que cela fonctionne avec Safari(5.1.7) sous Windows

.image-upload > input {
  visibility:hidden;
  width:0;
  height:0
}

<div class="image-upload">
  <label for="file-input">
    <img src="https://via.placeholder.com/300x300.png?text=UPLOAD" style="pointer-events: none"/>
  </label>

  <input id="file-input" type="file" />
</div>

J'ai utilisé visibility: hidden, width:0 au lieu de display: none pour le problème de safari et a ajouté pointer-events: none en img pour qu'il fonctionne si la balise de type de fichier d'entrée se trouve dans la balise FORM.

Cela semble fonctionner pour moi dans tous les principaux navigateurs.

J'espère que cela aidera quelqu'un.

Answer 4

Une bien meilleure façon que d'écrire du JS est d'utiliser du natif, et il s'avère que c'est plus léger que ce qui a été suggéré :

<label>
  <img src="my-image.png">
  <input type="file" name="myfile" style="display:none">
</label>

De cette manière, le label est automatiquement connecté à l'entrée cachée. Cliquer sur l'étiquette revient à cliquer sur le champ.

Answer 5

Vous pouvez remplacer automatiquement l'image par une nouvelle image sélectionnée.

<div class="image-upload">
      <label for="file-input">
        <img id="previewImg" src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg" style="width: 100px; height: 100px;" />
      </label>

      <input id="file-input" type="file" onchange="previewFile(this);" style="display: none;" />
    </div>

<script>
        function previewFile(input){
            var file = $("input[type=file]").get(0).files[0];

            if(file){
              var reader = new FileReader();

              reader.onload = function(){
                  $("#previewImg").attr("src", reader.result);
              }

              reader.readAsDataURL(file);
            }
        }
    </script>