Bonjour, après avoir recherché sur le web et sur les forums du SDZ, une chose continue à me turlupiner à propos des <input type="file" />.

Pour être précis, je cherche à afficher un champ de ce type sans le champ de texte habituellement associé, servant à réceptionner le chemin (ou path) du fichier sélectionné à l'aide du bouton "Parcourir...".

J'aimerai masquer ce champ et garder uniquement le bouton Parcourir.

Youtube y parvient apparemment en Javascript :


En regardant la source de la page, j'ai constaté que le bouton "Ajouter la vidéo" était un <button></button>, il n'a cependant aucun évènement Javascript en attribut, je pense donc que l'évènement est géré par un fichier Javascript externe avec une méthode DOM (addEventListener).

La question est au final "connaissez-vous l'attribut à modifier en Javascript sur un type="file" qui permet de déclencher l'ouverture de la fenêtre de sélection du fichier à uploader ?".

J'ai essayé disabled mais cela masque le input type="file" et le rend inaccessible.

Merci d'avance.

une astuce est de le mettre transparent et donc completement invisible par dessus le bouton "Ajouter Video",je ne sais pas si il font qqchose de plus malin ou pas.

L'illusion fonctionne mais eux parviennent à déclencher l'évènement par Javascript, le <input type="file" /> est généré par code au moment du clic sur le bouton.

Mystère...

Edit : Rien que pour un point de vue de DOM, je trouve ça intéressant de le savoir donc je ne mets pas le sujet en résolu pour l'instant.

Merci pour ton astuce en tout cas, ça dépanne déjà bien que cela ne passe pas sous IE 6 et 7 (propriété opacity non implantée) et autre problème, la longueur du champ n'est semble-t-il pas paramétrable, donc la surface reste active sur la largeur...

Edit 2 : Mon idée étant de faire une icône "Ouvrir" comme sous Notepad ++ par exemple : , ta technique ne tient pas.

ben si, tu mets le bouton ouvrir en dessous du formulaire toujours transparent... Ca marche tres bien je m'en sers sur mon site.

Et si sous ie tu peux modifier l'opacity, c'est juste que ca ne s'appelle pas opacity mais c'est un filter...
Sinon ne t'embete pas tu le mets en visibility: hidden c'est plus simple
Et si tu peux changer la largeur

Par contre non c'est impossible de lancer une invite en simulant un evenement js, pour des questions de sécurité...
Enfin si tu trouves ca m'interesse !
Tu peux essayer un truc comme ca
<input type="file" id="toto"/>
et dans ton js : document.getElementById('toto').click() mais normalement ca ne fait rien !


regarde ici
http://j-willette.developpez.com/tutor [...] nputfile.html

c'est le premier lien google en tapant "personnaliser input file" t'as pas du trop chercher non plus !

L'uploader de YouTube est fait en Flash, c'pour ça
Donc j'pense que c'est Flash qui ouvre la fenêtre 'Parcourir'

<input type="button" value="Ajouter la vidéo" class="global-upload-button uploader-overlay-visible" id="start-upload-button">

<div class="upload-uploader-flash-content" style="position: absolute; left: 509px; top: 10px;">
<object width="107" height="23" type="application/x-shockwave-flash" id="FLASH_UPLOADER_1" data="http://s.ytimg.com/yt/swf/uploaderapi-vfl113139.swf" class="">
<param name="allowscriptaccess" value="always">
<param name="wmode" value="transparent">
<param name="flashvars" value="apiId=FLASH_UPLOADER_1&amp;apiInit=FLASH_UPLOADER_1onFlashReady">
</object>
</div>

Et je crois que ça a rapport avec ce JS... http://s.ytimg.com/yt/jsbin/www-upload [...] -vfl150608.js (bon décodage )