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 ;)
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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/