28172 sujets

CSS et mise en forme, CSS3

Changer le bouton parcourir (IE6, chrome, firefox, opera...)

Bonsoir à tous,

Voilà mon souci,
Du fait des particularités des navigateurs,
ma mise en page en HTML est aléatoire.

Je voulais donc opter par un bouton flash (appelé "versparcourir')
en lieu et place de ce traditionnel bouton parcourir.

Je voulais aussi opter pour une autre zone
pour "fixer" le fichier parcouru,
en lieu et place de la zone trraditionnelle.

Je voulais aussi qu'en cliquant sur le bouton flash
et aussi sur la zone de "fixer", que le menu
des fichiers à parcourir s'affiche.

Mais rien n'y fait.
J'ai retourné mon ami google dans tous les sens.

Pouvez-vous m'aider ?
Merci d'avance.
Modérateur
Bonjour,

Tu peux jeter un oeil à SWFUpload. En plus, ça l'affiche une barre de progression et ça permet l'upload de plusieurs fichiers à la fois.
Modérateur
C'est que tu peux te partir de SWFUpload pour le personnaliser selon tes goûts. Il supporte ce que tu as besoin de faire et même davantage.

Bon après, si tu voulais faire un truc de A à Z...
Modifié par Tony Monast (07 Oct 2010 - 18:01)
je voulais faire cela en css du type.
Mais cela plante en ie



input[type="file"] {
background-color :white;
font: 14px;
color: #3287C8;
border: 0;
cursor: pointer;
width: 500px;
}
.inputFile {
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
right: 0;
top: 0;
}
.inputText {
border: 1px solid #999;
padding: 0px 6px;
background: #def;
width: 130px;
}
#divFile {
position: relative;
width: 250px;
text-align: right;
}




<form name="form1" method="post" action="">
<table width="845" border="0" cellspacing="0" cellpadding="0">
<td width="100" height="27">Fichier 01</td>
<td width="165" height="27" valign="middle">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="152" height="24" id="FlashID2" title="parcourir">
<param name="movie" value="parcourir.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="8.0.35.0">
<!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="parcourir.swf" width="152" height="24">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="8.0.35.0">
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
<div>
<h4>Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object></td>
<td width="580">
<div id="divFile">
<input type="text" id="chosir" class="inputText" readonly="readonly">
<input type="file" name="fichier[]" onMouseDown="return false" onKeyDown="return false" onchange="document.getElementById('choisir').value = this.value" class="inputFile"></div></td>
</tr>
<tr>
<td width="100" height="27">&nbsp;</td>
<td width="165" height="27">&nbsp;</td>
<td width="580"><input type="submit" name="envoi" id="envoi" value="Envoyer"></td>
</tr>
</table>
</form>
</div>
<div id="se_deconnecter">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="152" height="24" id="FlashID5" title="se_deconnecter">
<param name="movie" value="se_deconnecter.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="swfversion" value="8.0.35.0">
<!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="se_deconnecter.swf" width="152" height="24">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="swfversion" value="8.0.35.0">
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
<div>
<h4>Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<div id="vers_page_precedente">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="152" height="24" id="FlashID6" title="vers_accueil">
<param name="movie" value="accueil.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="swfversion" value="8.0.35.0">
<!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="accueil.swf" width="152" height="24">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="swfversion" value="8.0.35.0">
<param name="expressinstall" value="Scripts/expressInstall.swf">
<!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
<div>
<h4>Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<div id="journee"></div>
<div id="heure"></div>
</div>
<div id="pied">
<table width="945" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="40"><img src="images/pied_gauche.gif" alt="pied_gauche" width="40" height="97" border="0"></td>
<td width="120"><a href="formulaire00.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('bouton_devis','','images/bouton_devis_on.gif',1)"><img src="images/bouton_devis_off.gif" alt="bouton_devis" name="bouton_devis" width="120" height="97" border="0"></a></td>
<td width="120"><a href="acces00.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('bouton_acces','','images/bouton_acces_on.gif',1)"><img src="images/bouton_acces_off.gif" alt="bouton_acces" name="bouton_acces" width="120" height="97" border="0"></a></td>
<td width="120"><a href="infos00.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('bouton_infos','','images/bouton_infos_on.gif',1)"><img src="images/bouton_infos_off.gif" alt="bouton_infos" name="bouton_infos" width="120" height="97" border="0"></a></td>
<td width="545"><img src="images/pied_droite_tout_vide.gif" alt="pied_droite" width="545" height="97" border="0" usemap="#Map3"></td>
</tr>
</table>
</div>
jytest a écrit :
...


pour IE rajoute à ton champ input file :

a écrit :
<input onfocus="this.click();this.blur();" type="file" name="fichier[]" onMouseDown="return false" onKeyDown="return false" onchange="document.getElementById('choisir').value = this.value" class="inputFile">


de rien. Smiley cligne


ps: le this.blur(); est un plus qui sert uniquement(dans ce cas) à enlever le vieux curseur clignotant dans le champs input original après une selection du fichier annulée.
Modifié par bogs (07 Oct 2010 - 21:47)
Avec ton aide, j'avance...
A part que mon code plante IE et Chrome...
Après quelques clics, c'est le plantage assuré...
Je constate une anomalie sur le visuel de ma page :
le bouton parcourir est descendu d'une ligne par rapport à la zone du nom de fichier !!!
Est-ce la cause de mes soucis ???
En lieu et place de de bouton, comment intégrer le bouton flash ('choisir.swf') ?
De plus, cette opération doit se faire pour 3 fichier (fichier01, fichier02, fichier03)
Aidez-moi svp.

Désolé mais il m'est impossible d'envoyer la capture d'écran (jpeg de 19,3ko)


.inputFile {
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
right: 0;
top: 0;
}
.inputText {
border: 1px solif #999;
padding: 0px 6px;
background: #def;
width: 130px;
}
#divFile {
position: relative;
width: 250px;
text-align: right;
}
#bouton {
border: 1px solid #def;
background: #ffc;
width: 80px;
paddind: 1px 10px;
}



<div id="detail">
<form name="form1" method="post" action="">
<table width="845" border="0" cellspacing="0" cellpadding="0">
<td width="145" height="27">Fichier 01</td>
<td width="700" height="27">
<div id="divFile">
<input type="text" id="choisir" class="inputText" readonly="readonly">
<input onfocus="this.click();this.blur();" type="file" onMouseDown="return false" onKeyDown="return false" onchange="document.getElementById('choisir').value = this.value" class="inputFile"><div id="bouton">Parcourir</div>
</div>
</td>
</tr>
<tr>
<td width="145" height="27">&nbsp;</td>
<td width="700"><input type="submit" name="envoi" id="envoi" value="Envoyer"></td>
</tr>
</table>
</form>
</div>
jytest a écrit :
Avec ton aide, j'avance...
A part que mon code plante IE et Chrome...
Après quelques clics, c'est le plantage assuré...
Je constate une anomalie sur le visuel de ma page :
le bouton parcourir est descendu d'une ligne par rapport à la zone du nom de fichier !!!
Est-ce la cause de mes soucis ???
En lieu et place de de bouton, comment intégrer le bouton flash ('choisir.swf') ?
De plus, cette opération doit se faire pour 3 fichier (fichier01, fichier02, fichier03)
Aidez-moi svp.

Désolé mais il m'est impossible d'envoyer la capture d'écran (jpeg de 19,3ko)

pour le saut de ligne du "bouton", c'est normal, c'est un div, donc un block qui part défaut s'affiche en saut de ligne.

il existe toutes sortes de solutions, mais n'étant pas un expert, je ne serai te dire laquelle est la meilleure, le float me semble une bonne solution :


#bouton {
float:right;
border: 1px solid #def;
background: #ffc;
width: 80px;
paddind: 1px 10px;
}

ps: n'hésites pas à définir un width à ton input file, autrement tu risques que sur certains navigateurs ça enclenche ton input même si l’utilisateur clique en dehors et sur d'autres navigateurs, il risquerait d'être trop petit et le clique de l'utilistaeur dans ton faux input n'aurait aucun effet. Smiley cligne
Modifié par bogs (08 Oct 2010 - 09:51)
cette histoire me prend le chou.
Quelqu'un (une bonne âme) peut-elle solutionner mon problème ?
Je tourne en rond, oui en rond !!!
Je cherche un coin (carré) pour me taper la tête au mur...
A l'aide, svp
Sujet clos
Aller à