Quelle est la meilleure façon de remplacer le bouton de navigation de fichier en HTML?

StackOverflow https://stackoverflow.com/questions/108149

  •  01-07-2019
  •  | 
  •  

Question

Je sais qu'il est possible de remplacer le bouton de navigation, généré en HTML, lorsque vous utilisez la balise input avec type = " fichier .

Je ne sais pas quel est le meilleur moyen, alors si quelqu'un a de l'expérience dans ce domaine, merci de contribuer.

Était-ce utile?

La solution

La meilleure solution consiste à rendre le contrôle de saisie de fichier presque invisible (en lui attribuant une très faible opacité - ne faites pas " visibilité: masqué " ou " ; display: none ") et placez absolument quelque chose en dessous - avec un indice z inférieur .

De cette façon, le contrôle réel ne sera pas visible et ce que vous y placerez sera visible. Mais puisque le contrôle est positionné au-dessus de ce bouton, il capturera toujours les événements de clic (c’est pourquoi vous souhaitez utiliser l’opacité, et non la visibilité ou l’affichage - les navigateurs rendent l’élément non cliquable si vous les utilisez pour le masquer).

Cet article approfondit la technique.

Autres conseils

Les navigateurs n’aiment pas vraiment que vous fouilliez avec les entrées de fichiers, mais vous pouvez le faire. J'ai déjà vu quelques techniques, mais la plus simple consiste à positionner de manière absolue l'entrée de fichier sur ce que vous voulez utiliser comme bouton et à définir son opacité sur zéro ou presque. Cela signifie que lorsque l'utilisateur clique sur l'image (ou sur ce que vous avez sous l'image), il clique en fait sur le bouton de navigation invisible.

Par exemple: 

<input type="file" id="fileInput">
<img src="...">

#fileInput{
    position: absolute;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
}

Si cela ne vous dérange pas d'utiliser javascript, vous pouvez définir l'opacité de l'entrée de fichier sur 0, placez votre contrôle stylé au-dessus via z-index et envoyez clickevents de votre bouton à l'entrée de fichier. Voir ici pour la technique: http://www.quirksmode.org/dom/inputfile.html

Techniquement, cela n’est pas possible pour des raisons de sécurité. L’utilisateur ne peut donc pas être induit en erreur.

Cependant, il existe quelques solutions de contournement - consultez http: // www. quirksmode.org/dom/inputfile.html pour un exemple.

Pour mémoire, cette question a déjà été posée ici (où j'ai donné la même réponse).

Vous pouvez également utiliser un programme de téléchargement Flash comme SWFupload .

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top