Remplacer le type d'entrée = fichier par image

Question

Comme beaucoup de gens, je voulais personnaliser l'image laide input type=file，并且我知道如果没有一些 hack 和/或 javascript 就无法完成。但是，问题是，就我而言，上传文件按钮仅用于上传图像（jpeg|jpg|png|gif），所以我想知道是否可以使用“clickable" exactement comme le fichier de type d'entrée (affiche la boîte de dialogue et affiche le même $_FILE sur la page soumise).

J'ai trouvé une solution de contournement ici, qui est également intéressante (mais ne fonctionne pas dans Chrome =/).

Que faites-vous lorsque vous souhaitez ajouter du style au bouton de fichier ? Si vous avez des opinions à ce sujet, veuillez cliquer sur le bouton de 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>

Fondamentalement, l'attribut for d'une étiquette fait que cliquer sur l'étiquette revient à cliquer sur l'entrée spécifiée.

De plus, définir la propriété display sur none permet à l'entrée du fichier de ne pas être rendue du tout, la masquant ainsi proprement.

Testé dans Chrome, mais selon le Web, devrait fonctionner dans tous les principaux navigateurs. :)

Éditeur : JSFiddle ajouté ici : https://jsfiddle.net/c5s42vdz/