Discussion :

[nabbo]

hello

Je cherche à écrire un script javascript qui me permettre de visualiser une image avant de l'uploader.

Mon code est le suivant :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<script language="javascript" type="text/javascript">
  function refreshImg(){
     document.f1.picture.src = 'file:///'+ document.f1.imageField.value;
   }
</script>
 
Choisir le fichier : <input name="imageField" type="file" onchange="refreshImg()"><br />
 
<img src="./images/vide.gif" border='0' id="picture">

J'ai deux problèmes :
1. le code ne marche pas sous firefox (problème de sécurité : y a-til moyen de le contourner ?)
2. comment faire pour changer dynamiquement le nom de mes champs (imagefield et picture) en les plaçant en paramètre à la fonction ?

Merci de votre aide

[Caerbannog]

Si il y a un pb de sécurité, c'est évident qu'il faut pas chercher à le contourner...

Code :

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

1
2
3
4
5
6
7
8
9
<script language="javascript" type="text/javascript">
  function refreshImg(nom){
     document.getElementById(nom).src = 'file:///'+ document.f1.imageField.value;
   }
</script>
 
Choisir le fichier : <input name="imageField" type="file" onchange="refreshImg('picture')"><br />
 
<img src="./images/vide.gif" border='0' id="picture">

[nabbo]

quand je dis contourner... je pense à trouver un moyen différent d'arriver au même résultat...

[Mr N.]

pour completer la reponse à la question 2, tu peux passer this ou this.value à ta fonction :

Code :

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

<input name="imageField" type="file" onchange="refreshImg('picture', this.value)">

[nabbo]

ok j'ai essayé, ca marche

et pour firefox tu connaiterais pas une piste qui pourrait m'aider à résoudre mon problème ?

[Mr N.]

tu as un exemple de ton code en ligne ?

[nabbo]

pour completer la reponse à la question 2, tu peux passer this ou this.value à ta fonction :

Code :

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

<input name="imageField" type="file" onchange="refreshImg('picture', this.value)">

this.name pour être exact ;-)

[nabbo]

non je bosse en local pour l'instant

tu veux savoir quoi ?

je peux copier/coller le code si tu veux

[nabbo]

en substance ca donne ca :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<script language="javascript" type="text/javascript">
 
  function refreshImg(nom,fich){
     document.getElementById(nom).src = 'file:///'+ document.getElementById(fich).value;
   }
  </script>
<form enctype="multipart/form-data" action="./index.php?rubrique=upload" method="post" name="f1">
<table style="text-align: left; width: 930px; margin-top: 0px;" border="1" cellpadding="10" cellspacing="0">
  <tbody>
    <tr>
      <td colspan="1" rowspan="5" style="text-align: left; width:50%;">
 
Votre fichier doit être au format jpg<br>Choisir le fichier : <input name="imageField" type="file" onchange="refreshImg('picture',this.name)"><br />
 
<Img SRC="./images/vide.gif" border='0' id="picture" style="width:100%; height:435px;"></Img>
      </td>
	  <td colspan="2" rowspan="1" style="text-align: left; width: 450px;">
			Entrez le titre : <input name="titre">
	  </td>
   <tr>
      <td colspan="2" rowspan="1">Entrez l'auteur : <input name="auteur"></td>
    </tr>
    <tr>
      <td colspan="2" rowspan="1">Entrez un prix : <input name="prix"></td>
    </tr>
    <tr>
      <td colspan="2" rowspan="1">Entrez une description : <br><textarea cols="50" rows="7" name="description"></textarea>
</td>
    </tr>
    <tr>
	  <td style="text-align: center;height: 100px; width:500px;" >
		<img src="./images/vide.gif" id="mini" style="width:100%; height:100%;">
	  </td>
	  <td style="width:100px; text-align:right;">
		autres images<br>
		<input name="fichier2" type="file" onchange="refreshImg('mini',this.name)">
		<input name="fichier3" type="file" onchange="refreshImg('mini',this.name)">
		<input name="fichier4" type="file" onchange="refreshImg('mini',this.name)">
		<input name="fichier5" type="file" onchange="refreshImg('mini',this.name)">
		<input name="fichier6" type="file" onchange="refreshImg('mini',this.name)">
	  </td>
 
	</tr>
  </tbody>
</table>
<br>
</div>
<div align="center"><input type="submit" name="confirm_upload" value="Envoyer" ></div>
 
</form>

pour la mise en forme, (tableaux, etc) je changerai plus tard ;-)

alors des idées pour firefox ?

[Mr N.]

non je bosse en local pour l'instant

tu veux savoir quoi ?

c'est juste que j'ai la flemme de faire un script, de l'uploadé sur un serveur pour faire le test. ^^

Sinon sur quel ligne Fx te met l'erreur ?

[nabbo]

Erreur : document.getElementById(fich) has no properties

Ligne : 4

[Mr N.]

Code :

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

<input name="imageField" type="file" onchange="refreshImg('picture', this.value)">

+

Code :

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

1
2
3
4
 
function refreshImg(nom, fichier) {
   document.getElementById(nom).src = fichier;
}

[nabbo]

si je mets : onchange="refreshImg('picture', this.value)
il ne donne pas de message d'erreur, mais aucune image ne s'affiche

si je mets : onchange="refreshImg('picture', this.name)
il me crée une image qui s'appelle 'undefined' (et qui donc n'existe pas...)

mais je progresse...

c'est pas document.getElementById(nom).src = fichier.qqch ?

[Mr N.]

this.name = imageField (<input name="imageField"...)
Donc c'est bien this.value

[Mr N.]

Je viens de tester ceci en local et ca marche :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<input name="imageField" type="file" onchange="refreshImg('picture', this.value)">
 
<script>
 
function refreshImg(nom, fichier) {
   document.getElementById(nom).src = 'file:///'+fichier;
}
 
</script>
 
<img id="picture" />

[nabbo]

en mettant this.value et 'file:///'+fichier : il me remet l'erreur de sécurité :

Erreur de sécurité : le contenu situé à http://127.0.0.1/[...]/index.php?rubrique=upload ne peut pas charger de données ou établir un lien vers file:///[...toto].jpg.

en mettant this.value et fichier, il ne me met pas d'erreur, mais ne change pas l'image...

je tourne en rond...

[nabbo]

erf

ton bout de code marche également chez moi, mais pas dans mon fichier avec les tableaux...

je ne comprends rien là...

[nabbo]

ok

c'est un problème de serveur.
firefox accepte le fichier quand il est ouvert en local (fichier->ouvrir...), mais le refuse quand il vient d'un serveur (meme en local : 127.0.0.1)

comment faire ?

[nabbo]

bon j'ai une partie de réponse... qui ne me convient pas franchement, mais qui marche...

j'ai cherché du côté de firefox...
en modifiant la valeur de security.checkloaduri dans about:config

mais bon cela revient à ouvrir une brèche tellement énorme que même moi je comprends ce que je fais...

n'y aurait-il pas moyen de faire les choses proprement ?

[Mr N.]

Tu ne peux rien faire. En javascript tu ne peux acceder à un domaine autre que celui d'où est appelé le script.