Maison > Questions et réponses > le corps du texte
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 ;)
P粉1584737802023-10-14 10:09:12
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/