Prévisualisation d'une image sélectionnée sur disque dur

**ero-sennin** · 01/08/2008, 12h38

Bonjour,

Tout d'abord, je tiens à dire que je suis très novice en ce qui concerne le javascript

J'essaie depuis ce matin de faire une prévisualisation d'image avant Upload.
Pour ce faire, j'ai parcouru le forum, et éplucher divers site mais je n'arrive pas à cerner mon soucis.

Voici le code en son entier :

Code xhtml :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
  <title>Test</title>
 
  <script type='text/javascript'>
  function VoirImage() 
  {
    var imgSrc=document.getElementById('imagePortrait').value;
        document.getElementById('imagePortrait').src="file:///"+imgSrc;
  }
  </script>
  </head>
 
  <body>
    <table>
      <tr>
        <td><img id="imagePortrait" src="/photos/portrait_non_disponible.png" /></td>
        <td>
        <fieldset>
          <legend>Ajouter une image (facultatif)</legend>
          <!-- champs d'envoi de fichier, de type file -->
          <p><label for='photo'>Photo :</label><input id="photo" type="file" name="photo" onchange="VoirImage()"/></p>
        </fieldset>
        </td>
      </tr>
    </table>
  </body>
</html>

Donc le but, c'est qu'une fois que l'utilisateur à choisi une image, on la prévisualise sans pour autant l'uploader... Si le champ input file est vide, alors on laisse l'image par défaut que j'ai renseigné dans la balise.

Quelqu'un peut-il m'expliquer mon erreur car j'avoue que là, j'ai un peu de mal à cerner le souci.

Merci par avance
Ero-Sennin

**Matthieu2000** · 01/08/2008, 13h19

var imgSrc=document.getElementById("photo").value;

erreur d'id?

**ero-sennin** · 01/08/2008, 13h31

Alors la, je dis grand merci!
C'est bon, je récupère bien l'image

Il ne me reste plus qu'à redéfinir l'image.

Petite question ...
Sur Firefox, on ne peut faire ce genre de chose (c'est une sécurité d'après ce que j'ai lu). On ne peut pas faire autre chose, contourner ?

Merci

**Matthieu2000** · 01/08/2008, 14h14

Envoyé par ero-sennin

Sur Firefox, on ne peut faire ce genre de chose (c'est une sécurité d'après ce que j'ai lu).

testé sous ff et ça marche...

**ero-sennin** · 01/08/2008, 14h24

Qu'as tu testé ?
Avec mon code et FF 2.0.0.16 ca ne fonctionne pas !

**Matthieu2000** · 01/08/2008, 15h19

Envoyé par ero-sennin

Qu'as tu testé ?

testé en local

plus de sécurité

**Bovino** · 01/08/2008, 15h23

Normalement, que ce soit FF ou n'importe quel navigateur, javascript ne permet pas de récupérer des informations hors domaine.
Mais là, tu ne vas pas récupérer le fichier mais juste la source.
L'image elle peut provenir de n'importe quel domaine, donc à priori ça devrait marcher.

EDIT:
En revanche, dans

Code :

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

file:///"+imgSrc

vérifie le chemin renvoyé qui n'est pas le même selon IE et FF je crois.

**ero-sennin** · 01/08/2008, 15h52

Envoyé par Matthieu2000

testé en local

plus de sécurité

Je test également en local et pourtant ...
Le fichier se situe sur C:\, le nom étant moto.png
Lorsque je récupère le contenu de la variable JavaScript, j'ai
file:///C:/moto.png

Sous IE, pas de soucis mais sous FireFox, il ne veut rien savoir (étrange car quand je copie colle le lien, il m'affiche l'image

)

Envoyé par Bovino

Normalement, que ce soit FF ou n'importe quel navigateur, javascript ne permet pas de récupérer des informations hors domaine.
Mais là, tu ne vas pas récupérer le fichier mais juste la source.
L'image elle peut provenir de n'importe quel domaine, donc à priori ça devrait marcher.

EDIT:
En revanche, dans

Code :

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

file:///"+imgSrc

vérifie le chemin renvoyé qui n'est pas le même selon IE et FF je crois.

Après test, IE et FF supporterai l'appel de comme décrite plus haut!

Mystère hein! Et dire que ça marche chez Matthieu2000

**Sub0** · 02/08/2008, 12h42

J'ai eu également le même problème que toi.
Si ma mémoire est bonne, je n'ai pas trouvé de solution.

A tout hasard, essaye d'ajouter un paramètre aléatoire (timestamp) pour actualiser l'image dans le cache:
file:///C:/moto.png?p=1213245421

**ero-sennin** · 02/08/2008, 16h38

Salut Sub0,

Au risque de passer pour un "nul", je ne comprends pas trop ta méthode. En fait, je me demande comment faire pour actualiser le cache.
Si ce n'est pas faisable, hé bien, je laisserai tombé... d'après mes recherches sur le web, c'est firefox qui bloque cela pour une question de sécurité!
Je laisse le topic ouvert encore un peu

A+

**Sub0** · 02/08/2008, 17h34

Voilà ce que j'ai en fait :

Code html :

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

1
2
  <img name="my_im" src=""/><br/>
  <input type="file" onchange="document.my_im.src=this.value;"/>

J'arrive à la même conclusion que toi. Ça marche avec IE et pas FF.
Il s'agit bien d'un blocage de sécurité.
IE7 me demande la permission pour utiliser cette fonction.

**ero-sennin** · 03/08/2008, 00h48

Re Sub!

Merci d'avoir testé ton idée sur IE7. Je sais par conséquent que je ne vais pas utiliser la méthode alors, car cela va générer des soucis par la suite et je voudrai faire un site compatible quasiment à 100% sur tous navigateurs. Je m'efforce de respecter la W3C aussi bien coté XHTML que CSS

Sur ce, bonne soirée!
@+

Ero-Sennin