[Résolu] Compatibilité entre navigateurs

Question

jytest

9 Oct 2010 à 12:23

Bonjour à tous.

pouvez-vous me dire pourquoi
ce code ne fonctionne-t-il que sous IE ?

Que faire pour qu'il fonctionne sous Chrome, Opéra et Firefox ???
Merci d'avance pour vos corrections de code !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>

<script type="text/javascript">
function getfile(){
    document.getElementById('hiddenfile').click();
    document.getElementById('selectedfile').value=document.getElementById('hiddenfile').value
}
</script>

    
</head>
<body>
<input type="file" id="hiddenfile" size="80" style="display: none" />
<input type="text" id="selectedfile" />
<input type="button" value="Parcourir" onclick="getfile();" />
</body>
</html>

Modifié par jytest (16 Oct 2010 - 16:12)

davidito

9 Oct 2010 à 18:45

Salut,

A priori ce code fonctionne que sous ie6.
Et est bloqué sous les autres navigateurs pour des raisons de sécurité.

Je te renvoie à un post (en anglais) qui traite du sujet:
http://stackoverflow.com/questions/1829774/jquery-simulating-a-click-on-a-input-typefile-doesnt-work-in-firefox

De plus même en testant ce code tout simple:



<html>
<head>
	<title>example</title>    
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">  
	$(document).ready( function(){   
		$("#test").click( function(){
			alert("avant");
			$("#attach").click();
			alert("apres");
		});		
	}); 
  </script> 
</head>
<body>
	<form><input id="attach" type="file" /><input type="button" id="test" value="test" /></form>
</body>
</html>

Sous ie6, ca ouvre le input File
Sous FF, rien.

voila. Je crois que c'est peine perdue...

jytest

9 Oct 2010 à 18:53

Ne connaîtrais-tu une autre méthode pour y arriver ???

davidito

9 Oct 2010 à 20:51

Pour personnaliser ton bouton input file, je te propose une solution (Ca vient de http://www.quirksmode.org/dom/inputfile.html en anglais. J'ai juste simplifié et utilisé jquery):



<html>
<head>
	<title>example</title>    
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">  
		$(document).ready( function(){ $(".file").change( function(){ $(".filevisible").attr("value",$(".file").attr("value")); });	}); 
	</script> 
<style type="text/css">

.fileinputs {
	position: relative;
}

.fakefile {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}

.file {
	position: relative;
	text-align: right;
	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity: 0;
	z-index: 2;
}


</style>
  
</head>
<body>

	<form>
		<div class="fileinputs">
			<input class="file" type="file">
			<div class="fakefile">
				<input type="text" class="filevisible" ><img src="select.gif">
			</div>
		</div>
	</form>

</body>
</html>

Le principe est simple:
1- Superposer un input:file sur un div qui contient un input:text et une image.
2- Rendre le input:file transparent.
3- Avec jquery, recupérer le contenu de input:file et le mettre dans input:text

Tel quel ca marche pas sous ie6 et 7 (du a l'opacity, j'ai pas cherché... mais tampis, dans ce cas autant laisser le bouton d'origine)

ca fonctionne sous FF, chrome, opera, safari et ie9. Et le gros avantage c'est que ca uniformise l'apparence de tes input:file sur tous les navigateurs.

Smiley cligne

jytest

9 Oct 2010 à 21:05

Merci à toi !!!
Cela fait quelques heures que je m'acharnais à faire cela.
Merci.

Par contre, 2 questions encore, si tu permets :

1.
N'as-tu pas un code pour intégrer un bouton flash,
qui ferait exactement la même chose que le bouton parcourir ???

2.
Comment intégrer jquery dans DreamWeaver cs5 ???
Ma méthode d'intégration ne fonctionne pas !!!

Grand merci à toi...
Jean-Yves

davidito

9 Oct 2010 à 22:32

pour intégrer un bouton flash, il doit pas y avoir de problème puisque le principe est le suivant:
quand tu cliques sur l'image ou sur le input:text, tu cliques en fait sur le input:file (qui se voit pas parce que transparent, mais qui est bien là). Donc si tu remplaces l'image par un flash, ou un gif animé, le résultat sera le même.

J'utilise pas dreamweaver, sais pas t'aider sur ce point. Cela dit, ya aussi moyen d'utiliser directement du javascript sans jquery si ca t'es plus facile (si tu dois installer jquery que pour ca, ca vaut pas le coup):

Code avec javascript au lieu de jquery:



<html>
<head>
	<title>example</title>
	<script type="text/javascript">  
		function getfile(){ document.getElementById('filevisible').value=document.getElementById('file').value;	}
	</script> 
<style type="text/css">

div.fileinputs {
	position: relative;
}

div.fakefile {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}

input.file {
	position: relative;
	text-align: right;
	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity: 0;
	z-index: 2;
}



</style>
  
</head>
<body>

	<form action="#" >
		<div class="fileinputs">
			<input type="file" id="file" class="file" onchange="getfile();" >
			<div class="fakefile">
				<input type="text" id="filevisible" class="filevisible" ><img src="select.gif">
			</div>
		</div>
	</form>


</body>
</html>

jytest

9 Oct 2010 à 22:54

Bon d'abord merci.
Je vais être honnête,cela fait presque 2 jours
que je me cassais la tête sur ce truc.
Merci.

Par contre, il y a quelque chose
que je comprends pas
pourquoi jquery sans jquery. ???
A quoi sert jquery si javascript fait cela ???
Peux-tu éclairer ma lanterne ???

Bonne soirée à toi.
Et encore merci pour ta très précieuse aide!!!!

davidito

9 Oct 2010 à 23:40

Pour faire tres simple: Jquery est une bibliothèque javascript. C'est pour utiliser javascript mais différemment (d'ailleurs le slogan en dit long "code moins, fais-en plus" ). Jquery simplifie l'utilisation du javascript, mais nécessite pour cela que tu charges un fichier (la bibliothèque) qui contient toutes les fonctions qui justement te simplifieront le codage.

Dans ton cas, si je te dis avec jquery et sans jquery: c'est que le code dont tu as besoin est tellement simple que jquery sert pas a grand chose pour le simplifier.
Autrement dit, si tu utilises déjà jquery pour ton site, pas de soucis. Mais si tu dois charger la bibliothèque seulement pour les 2 lignes, c'est pas optimal. mieux vaut dans ce cas là utiliser javascript "pur" directement.

pour comparaison:

En javascript "pur"


function getfile(){ document.getElementById('filevisible').value=document.getElementById('file').value;
} 
et tu mets onchange="getfile();"

- function getfile() sert a creer une fonction que tu appelles depuis un évènement
- document.getElementById('file').value; sert a récupérer la valeur du champs id="file"
- document.getElementById('filevisible').value= sert a attribuer la valeur au champs id="fileinvisible"
- onchange="getfile();" sert a lancer la fonction au changement de la valeur du champs

En jquery


        $(document).ready( function(){ $(".file").change( function(){ $(".filevisible").attr("value",$(".file").attr("value")); });    });

- $(document).ready( function(){...}); sert a creer tes fonctions une fois la page chargée
- $(".file").change( function(){...} ); signifie que quand le contenu du champs de class="file" va changer, ca va lancer la fonction.
- $(".file").attr("value"); récupère la valeur de ton champ de class="file"
- $(".filevisible").attr("value",$(".file").attr("value")); attribue au champs de class="filevisible" la valeur du champs de class="file"

Je vais pas trop rentrer dans les détails parce qu'il y a une flopée de tuto la-dessus.

Alors pourquoi Jquery si javascript fait cela ?
Parceque une fois que tu commences a avoir de gros besoin en javascript, jquery te simplifie bien la mise. Donc dans ton cas, utilise le javascript "pur" et te prends pas la tête avec jquery.

voila, j'espere t'avoir éclairé.
Smiley smile

Modifié par davidito (16 Oct 2010 - 16:43)

jytest

10 Oct 2010 à 01:23

Merci;
Merci.

jytest

10 Oct 2010 à 01:41

Et si je voulais que l'input soit 4x plus long...
Comment faire ???

jytest

10 Oct 2010 à 02:11

Simplement en insérant size="50" dans l'inputText
et en insérant la propriété width: 570; dans l'inputfile.
J'ai fait cela et cela a l'air de fonctionner !!!
Je suppose que c'est là la seule méthode pour y arriver.

Par contre, je viens d'insérer un bouton flash à la place de l'image.
Cela ne fonctionne pas tout à fait.
Encore une fois puis-je te demander ton aide ???

Voici l'autoscript du flash (qui fonctionne bien, dèjà testé)
et ensuite le xml (et à mon avis, c'est là uniquement
que l'action "parcourir" devrait s'effectuer...
le xml donne bien le label "Parcourir" au bouton,
mais que dois-je faire d'autre pour dem
Pourrais-tu y jeter un oeil ???

Code actionscript :
menu_item_group.menu_item._visible = false;
var xml:XML = new XML();
var total:Number;
var i:Number = 0;
var total:Number;

xml.onLoad = function()
{
var nodes = this.firstChild.childNodes;
total = nodes.length;

for (; i < total; i++)
{
menu_item_group.menu_item.duplicateMovieClip("menu_item" + i, i);
menu_item_group["menu_item" + i].over = true;
menu_item_group["menu_item" + i].item_label = nodes.attributes.item_label;
menu_item_group["menu_item" + i].item_no = i;
menu_item_group["menu_item" + i]._y = i * 35;
menu_item_group["menu_item" + i].flashmo_button._visible = true;
menu_item_group["menu_item" + i].over = true;
menu_item_group["menu_item" + i].flashmo_button.onRollOver = function()
{
this._parent.over = false;
};
menu_item_group["menu_item" + i].flashmo_button.onRollOut =
menu_item_group["menu_item" + i].flashmo_button.onDragOut = function ()
{
this._parent.over = true;
};
menu_item_group["menu_item" + i].flashmo_button.onRelease = function()
{
getURL( nodes[this._parent.item_no].attributes.item_url,
nodes[this._parent.item_no].attributes.item_url_target);
};
menu_item_group["menu_item" + i].onEnterFrame = function()
{
if (this.over == true)
{
this.prevFrame();
}
else
{
this.nextFrame();
}
};
}
};
xml.load("parcourir01.xml");
xml.ignoreWhite = true;

Et maintenant, voici le xml :
<?xml version="1.0" encoding="utf-8"?>
<items>
<item item_label="Parcourir" item_url="statistiques00.html" item_url_target="" />
</items>

davidito

10 Oct 2010 à 02:18

rajoute size="80" dans chaque input

Par contre pour le flash, j'y jetterai un coup d'œil mais ca me parle pas trop. Peut-être avec ton code complet pour avoir une vue d'ensemble...
Modifié par davidito (10 Oct 2010 - 02:24)

jytest

10 Oct 2010 à 02:59

Merci de ta très précieuse aide.

Merci de regarder pour mon flash.
Je viens de tout retourner avec mon ami google...
mais je ne sais pas quoi demander exactement.
J'ai aussi recherché une solution avec actionscript comme mot clé...
Non, je n'ai pas trouvé.

jytest

10 Oct 2010 à 03:30

Voici le code complet du html intégrant le swf...
Pour info, dreamweaver injecte "automatiquement"
tout le code relatif aux swf's.

Voici néanmoins le nouveau code HTML
avec le bouton "parcourir01.swf" :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>

<title>example</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
function getfile(){ document.getElementById('filevisible').value=document.getElementById('file').value; }
</script>
<style type="text/css">

div.fileinputs {
position: relative;
}

div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}

input.file {
position: relative;
text-align: right;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
width: 570px;
}

</style>

</head>
<body>

<form action="#" >
<div class="fileinputs">
<input type="file" id="file" class="file" onchange="getfile();" >
<div class="fakefile">
<input type="text" id="filevisible" class="filevisible" size="75" style="vertical-align: middle">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="152" height="24">
<param name="movie" value="parcourir01.swf" />
<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" />


<object type="application/x-shockwave-flash" data="parcourir01.swf" width="152" height="24">

<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" />

<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>

</object>

</object>
</div>
</div>
</form>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>

davidito

11 Oct 2010 à 15:31

Salut,
j'ai jeter un coup d'œil pour intégrer un contenu flash a la place de l'image du bouton et j'ai pas vu de problème particulier. Du moment que ton flash à les dimensions adéquates en hauteur et largeur, le résultat est le même qu'avec une image.

Par contre, au niveau de ton code, ya comme quelque chose de bizarre (l'histoire de la balise si c'est pas IE...). J'utilise peu flash et quand j'intègre du flash dans les sites, j'utilise pas cette méthode (un object dans un object si c'est pas IE). D'autant plus que lorsque c'est pas IE, le code des param du flash se répete...
bref, revois ton code pour etre sur que t'as pas une erreur. Sinon a par ca, je vois pas quel est le probleme.

ou alors essaye comme ca (met toute la balise entre [if !IE] et [endif]


				<!--[if !IE]>-->
					<object type="application/x-shockwave-flash" data="parcourir01.swf" width="152" height="24">

						<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>

					</object>
				<!--<![endif]-->

et derniere chose, je crois pas que ca soit

<!--<![endif]-->

mais plutot

<![endif]-->

Je te garantie rien, essaye...
Modifié par davidito (16 Oct 2010 - 16:44)

jytest

11 Oct 2010 à 17:19

Merci de ne pas m'avoir oublié...
Ton code a l'air de fonctionner,
mon seul dernier souci à cela
est de donner la commande "parcourir vers"
à ce bouton flash...

As-tu une idée ?

jytest

11 Oct 2010 à 17:36

For de ton code, j'ai pris l'initiative
d'uploader non plus 1 mais 10 fichiers...
Rien ne s'affiche dans l'inputfile !!! Pourquoi ?

jytest

11 Oct 2010 à 20:58

Pour mon dernier post, j'avais oublié
de modifier dans les getfiles.

par contre, pour le flash,
je n'ai toujours rien trouvé...

jytest

16 Oct 2010 à 16:11

Immense merci à toi pour ton aide très précieuse

davidito

16 Oct 2010 à 16:46

J'ai pas plus d'info pour flash, c'est pas vraiment ma tasse de thé...

Content d'avoir pu t'aider à avancer. Bonne continuation.

Sujet clos