5 réponses
Il y a très simple : il faut rendre le input file invisible:
puis créer son propre bouton avec un événement onclick (type jquery ici) qui va ouvrir le sélecteur du navigateur sans dévoiler le inputfile:
<input type="file" id="monInputFile" style="visibility:hidden"/>
puis créer son propre bouton avec un événement onclick (type jquery ici) qui va ouvrir le sélecteur du navigateur sans dévoiler le inputfile:
<input type="button" style="border:1px solid #000;width:100px;height:30px;background-color:#CCC;" onclick="$('#monInputFile').click();"/>
Bonjour, vous pouvez faire, ce très simple comme ça
<label for="photo" style="cursor:pointer; border:1px solid #999999; background-color:#eeeeee; padding:1px 3px 1px 3px; color:#333333;">Add photo</label>
<input type="file" name="photo" id="photo" style="position:absolute; top:-20000px;"/>
<label for="photo" style="cursor:pointer; border:1px solid #999999; background-color:#eeeeee; padding:1px 3px 1px 3px; color:#333333;">Add photo</label>
<input type="file" name="photo" id="photo" style="position:absolute; top:-20000px;"/>
Vous pouvez faire comme suit :
- Créer un faux formulaire avec un champ text, une icone browse et une icone submit
- Dans le même formulaire, placer un vrai champ file par-dessus les 2 précédents (text/browse), grâce au span z-index et au style opacity.
- Régler éventuellement les positions relative/absolute et top/middle/bottom/left/right:Xpx de chacun des 2 spans, en fonction des size des input.
Ce qui donne quelque chose comme :
Sylvain / http://www.marliere.org/
- Créer un faux formulaire avec un champ text, une icone browse et une icone submit
- Dans le même formulaire, placer un vrai champ file par-dessus les 2 précédents (text/browse), grâce au span z-index et au style opacity.
- Régler éventuellement les positions relative/absolute et top/middle/bottom/left/right:Xpx de chacun des 2 spans, en fonction des size des input.
Ce qui donne quelque chose comme :
<FORM name="myform" action="page.html" method="get" enctype="multipart/form-data">
<SPAN stype="position:relative;z-index:0;">
<INPUT type="text" size=12 name="myFileText">
<INPUT type="image" src="browse.gif" border="0">
<INPUT type="image" name="submit" value="fileValue" src="submit.gif">
<SPAN STYLE="position:absolute;middle:0px;left:0px;z-index:1;">
<INPUT type="hidden" name="fileOp" value="fileValue">
<SCRIPT type="text/javascript">
function fillForm() { document.myform.myFileText.value=document.myform.upName.value; }
</SCRIPT>
<INPUT type="file" style="-moz-opacity:0;filter:alpha(opacity:0);-khtml-opacity:0;"
size=1 name="upName" onkeyup="fillForm();" onmouseout="fillForm();">
</SPAN>
</SPAN>
</FORM>
Sylvain / http://www.marliere.org/
Bobinours
Messages postés
2898
Date d'inscription
jeudi 26 avril 2001
Statut
Membre
Dernière intervention
21 mars 2013
504
13 janv. 2008 à 12:51
13 janv. 2008 à 12:51
En effet, cette solution existe,.. Mais.
Elle est développée ici : http://www.quirksmode.org/dom/inputfile.html [en] (désolé les non-anglicistes).
Et comme l'indique cette page, il existe de nombreux problèmes de compatibilité avec les différents navigateurs.
La raison est que chaque navigateur gère à sa façon l'input file et sa taille varie complètement de IE à Firefox et surtout de Safari. Hors la solution présentée ici suppose que l'input fait toujours la même taille.
Elle est développée ici : http://www.quirksmode.org/dom/inputfile.html [en] (désolé les non-anglicistes).
Et comme l'indique cette page, il existe de nombreux problèmes de compatibilité avec les différents navigateurs.
La raison est que chaque navigateur gère à sa façon l'input file et sa taille varie complètement de IE à Firefox et surtout de Safari. Hors la solution présentée ici suppose que l'input fait toujours la même taille.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
xadrez
Messages postés
149
Date d'inscription
samedi 3 novembre 2001
Statut
Membre
Dernière intervention
23 mai 2003
16
25 mai 2002 à 12:14
25 mai 2002 à 12:14
Euh, à mon avis tu débutes...
Tu n'es pas obligé de faire un input type etc...
Tu peux très bien créer ton propre bouton (deux images avec survol)
Sur l'échiquier de la vie, j'ai choisi d'être le Fou,
parce que je ne suis pas Cavalier. Xadrez
Tu n'es pas obligé de faire un input type etc...
Tu peux très bien créer ton propre bouton (deux images avec survol)
Sur l'échiquier de la vie, j'ai choisi d'être le Fou,
parce que je ne suis pas Cavalier. Xadrez
1. je crois que tes remarques sont un peu déplacées car comment veux-tu connaitre mon niveau en une seule question.
2. tu n'as tjs pas répondu à ma question
3. je ne m'attarde pas a connaitre ce genre de futilité car moi je m'occupe de la programmation et pas de l'ergonomie du site seulement qd le client veut il faut trouver
4. si tu reponds ca a chaque avis que tu donnes t'es un peu mal barre car vu le nombre de messages ...
5. Personne ne connait tout sur les techniques du Web, un forum sert a ca et pas a critiquer la personne qui pose sa question .
Bref quand tu auras besoin de reponse en C# , C++ ou C ... appelle
2. tu n'as tjs pas répondu à ma question
3. je ne m'attarde pas a connaitre ce genre de futilité car moi je m'occupe de la programmation et pas de l'ergonomie du site seulement qd le client veut il faut trouver
4. si tu reponds ca a chaque avis que tu donnes t'es un peu mal barre car vu le nombre de messages ...
5. Personne ne connait tout sur les techniques du Web, un forum sert a ca et pas a critiquer la personne qui pose sa question .
Bref quand tu auras besoin de reponse en C# , C++ ou C ... appelle
Bobinours
Messages postés
2898
Date d'inscription
jeudi 26 avril 2001
Statut
Membre
Dernière intervention
21 mars 2013
504
>
nono
26 mai 2002 à 00:34
26 mai 2002 à 00:34
Je rejoins nono sur les points 1, 2, 4, 5 :o) (j'hésite pour le 3)
La réponse est simple, c'est imposible de changer l'apparence d'un input type="file" en HTML.
Il y aurait une possibilité avec des ActiveX, mais cette solution n'est pas compatible.
-= Bobinours =-
La réponse est simple, c'est imposible de changer l'apparence d'un input type="file" en HTML.
Il y aurait une possibilité avec des ActiveX, mais cette solution n'est pas compatible.
-= Bobinours =-
Bobinours
Messages postés
2898
Date d'inscription
jeudi 26 avril 2001
Statut
Membre
Dernière intervention
21 mars 2013
504
>
nono
26 mai 2002 à 00:48
26 mai 2002 à 00:48
J'ai retrouvé le lien parlant de cela, mais je dis préviens que je suis contre cette solution : http://www.allhtml.com/forum/index.php?t=l&f=2&i=112081
-= Bobinours =-
-= Bobinours =-
math 2000
Messages postés
2605
Date d'inscription
dimanche 9 septembre 2007
Statut
Membre
Dernière intervention
7 mai 2016
404
22 juil. 2009 à 19:15
22 juil. 2009 à 19:15
voir ici comment changer l'image de fond d'un bouton type file
http://www.commentcamarche.net/forum/affich 13272582 modifier bouton parcourir bouton type file?#6
http://www.commentcamarche.net/forum/affich 13272582 modifier bouton parcourir bouton type file?#6
1 oct. 2012 à 10:56