2008-09-20 19 views

Répondre

22

La meilleure façon est de rendre le contrôle d'entrée de fichier presque invisible (en lui donnant une opacité très faible - ne pas faire « visibility: hidden » ou « écran : aucun ») et absolument quelque chose de position en dessous - avec un z-index inférieur. De cette façon, le contrôle actuel ne sera pas visible, et tout ce que vous mettrez dessous apparaîtra. Mais puisque le contrôle est positionné au-dessus de ce bouton, il capturera toujours les événements de clic (c'est pourquoi vous voulez utiliser l'opacité, pas la visibilité ou l'affichage - les navigateurs rendent l'élément non cliquable si vous les utilisez pour le masquer).

This article approfondit la technique.

+2

Cela semble si hacky, c'est dommage qu'il n'y ait pas un meilleur moyen (tm). –

0

Ceci n'est pas techniquement possible pour des raisons de sécurité, donc l'utilisateur ne peut pas être induit en erreur.

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

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

5

Les navigateurs n'aiment pas vraiment que vous manipuliez des entrées de fichiers, mais c'est possible. J'ai vu quelques techniques, mais le plus simple est de positionner absolument l'entrée du fichier sur ce que vous voulez utiliser comme un bouton, et de définir son opacité à zéro ou presque-zéro. Cela signifie que lorsque l'utilisateur clique sur l'image (ou sur ce que vous avez sous la photo), il clique 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); 
} 
2

Si vous ne me dérange pas en utilisant javascript vous pouvez définir le opasity du fichier d'entrée à 0, placez votre commande sur le dessus Styled par z-index et envoyer clickevents de votre bouton à l'entrée de fichier. Voir ici pour la technique: http://www.quirksmode.org/dom/inputfile.html

0

Pour ce faire, vous pouvez également utiliser un chargeur Flash comme SWFupload.

+1

FLASH EST MORT .. – devXen

+0

@Chensformers Merci d'avoir heurté un fil de huit ans avec ça, je suppose? – ceejayoz