changer la source d'une image avec Firefox

**couetbis** · 05/11/2007, 16h53

Bonjour,
Comment changer la source d'une image à partir d'un Input File ?
Voici mon code qui fonctionne bien avec IE mais pas Firefox.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<html>
<head>
<script language="JavaScript">
function afficherImage(element,chemin)
{
	document.getElementById(element).src = chemin;
}
</script>
</head>
<body>
 
    <img id="imgec" src=""/>
    <input id="idImageEc" name="EdImgec" type="file" 
           value="" 
           onchange="afficherImage('imgec',this.value)" />
 
</body>
</html>

J'ai l'impression que c'est un problème de chemin absolu car je teste avec des chaines en dur, les chemins relatifs passent bien mais pas les chemins absolus.

Comment faire ?

**couetbis** · 06/11/2007, 10h58

Finalement, il suffit de concaténer "file:///" au chemin.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
function afficherImage(element,chemin)
{
	document.getElementById(element).src = 'file:///' + chemin;
}

**couetbis** · 06/11/2007, 17h21

Fausse alerte !
Finalement ça ne fonctionne qu'en statique. Je suis dans le cas d'une application web avec un serveur java - tomcat - des pages jsp et ça ne fonctionne pas.
Y a t-il des restrictions particulières avec Firefox ? Un manque de droit ?

**arkandias** · 06/11/2007, 17h45

Si tu veux le faire sur le net et pas en local, aucune chance que ca marche avec aucun navigateur que ce soit

C'est une mesure de sécurité, sur Internet tu ne peux pas afficher les données du disque dur du client

**couetbis** · 06/11/2007, 17h56

Je comprends que pour des raisons de sécurité ce soit interdit mais ça fonctionne quand même avec IE !
Dommage ...

**arkandias** · 06/11/2007, 17h59

Ca ne marche pas chez moi (heureusement !)

Quand tu vas sur ton site web, et que tu sélectionne un fichiersur ton disque dur, il t'affiche l'image ??

**couetbis** · 06/11/2007, 18h02

Oui aussi bizarre que cela semble paraitre ça affiche mon fichier image !
Tu peux tester le code ci-dessous avec IE :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<html>
<head>
<script language="JavaScript">
function afficherImage(element,chemin)
{
	document.getElementById(element).src = chemin;
}                  
 
</script>
</head>
<body>
    <img id="imgec" src=""/>
    <input id="idImageEc" name="EdTypeAbsence.imgec" type="file" 
           value="" 
           onchange="afficherImage('imgec',this.value)" />
</body>
</html>

**arkandias** · 06/11/2007, 18h05

J'ai déjà essayé ca ne marche pas... http://arkandias.free.fr/test5-7.htm

**couetbis** · 06/11/2007, 18h35

Eh bien ça marche pour moi, je sélectionne une image, j'ai donc une un chemin du type C:\Documents and Settings\login\Bureau\images\coche2.png dans le input. J'ai peut-être un mauvais niveau de sécurité dans la configuration d'IE.
Je comprends pourquoi ça ne peut pas marcher mais je trouve ça dommage car l'utilité que j'en fait est très naïve ... enfin le problème c'est qu'il y a toujours de dérives.
En tout cas merci pour toutes tes explications !

**guiguich** · 07/11/2007, 19h43

Une petite analyse...

Partons d'un cas simple:
1. créer un fichier test.html
2. mettre une image dont la source est un chemin local

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="file:///Users/xxxxx/images/image.png" alt="image.png">

3. on test...

Différents cas peuvent alors se présenter, selon le protocole utilisé :
- protocole 'file' : file:///chemin/vers/ma/page.html
- protocole 'http' : http://mon.site.com/page.html (ou http://localhost/page.html)

On est tous d'accord qu'avec le protocole 'file' (c'est peut etre pas vraiment un protocole, mais bon...), l'image est affichée, avec IE comme avec Firefox.

Avec 'http', c'est different : l'interpreteur javascript du navigateur doit empécher (pour les raisons de sécurité citées dans les messages précédents) la lecture (et bien évidemment l'écriture aussi...) des fichiers locaux, à moins qu'on lui indique explicitement (cas d'un upload). Verdict :
- avec Firefox : le 'alt' est affiché (normal, l'image n'est pas accessible)
- avec IE ... l'image est affichée !!!

On peut tout d'abord penser que le test ayant été effectué avec l'url http://localhost/page.html, IE devine que c'est en local et donc autorise la lecture. Quenéni (de toute facon je suis sur mac, donc pas d'IE en local). Le test précédent a été effectué depuis un PC du réseau, avec IE6, en pointant une url du type http://192.168.56.3/page.html, ou l'ip est celle de mon mac.

Bilan : IE6 permet bel et bien la lecture de fichier locaux via javascript

Et bien les gars, si ca c'est pas une faille de sécu...
PS: Quelqu'un pourrait-il tester avec IE7 svp ?

Cordialement,
Guillaume