Preview d'une image avant upload

Version imprimable

hello

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

Mon code est le suivant :
Code:

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

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

Code:

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

20/12/2005, 22h39
nabbo

quand je dis contourner... je pense à trouver un moyen différent d'arriver au même résultat...
20/12/2005, 22h50
Mr N.

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

Code:

<input name="imageField" type="file" onchange="refreshImg('picture', this.value)">
20/12/2005, 22h51
nabbo

ok j'ai essayé, ca marche :D

et pour firefox tu connaiterais pas une piste qui pourrait m'aider à résoudre mon problème ?
20/12/2005, 22h52
Mr N.

tu as un exemple de ton code en ligne ?
20/12/2005, 22h54
nabbo

Citation:

Envoyé par Mr N.

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

Code:

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

this.name pour être exact ;-)
20/12/2005, 22h55
nabbo

non je bosse en local pour l'instant

tu veux savoir quoi ?

je peux copier/coller le code si tu veux

en substance ca donne ca :

Code:

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 ?

20/12/2005, 23h19
Mr N.

Citation:

Envoyé par nabbo

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 ?
20/12/2005, 23h22
nabbo

Erreur : document.getElementById(fich) has no properties

Ligne : 4
20/12/2005, 23h48
Mr N.
Code:

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

+
Code:

1 2 3 4 function refreshImg(nom, fichier) { document.getElementById(nom).src = fichier; }
20/12/2005, 23h58
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 ?
21/12/2005, 00h18
Mr N.

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

Je viens de tester ceci en local et ca marche :

Code:

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

21/12/2005, 00h26
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... :(
21/12/2005, 00h32
nabbo

erf

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

je ne comprends rien là... :(
21/12/2005, 00h39
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 ? :(
21/12/2005, 00h46
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 ? :roll:
21/12/2005, 00h50
Mr N.

Tu ne peux rien faire. En javascript tu ne peux acceder à un domaine autre que celui d'où est appelé le script.
21/12/2005, 01h02
nabbo

et pourtant ca marche sous ie...
mais bon je comprend les implications que ça a quant à la sécurité...

aller demain je redimensionne l'image à la volée... ;-)

merci pour ton aide :hola: