Discussion :

[partyboy]

Bonjour à tous,

j'ai un petit problème d'affichage dynamique d'une image.

Je m'explique, j'ai un <input type='file' .../>, l'utilisateur choisi une image.

Une fois l'image choisie, en javascript je crée un élement de type img et je mets en attribut 'src' la value de l'input. J'ai bien une balise qui s'ajoute avec une icone genre 'image non trouvée' alors que si je clic dessus et je fais afficher l'image elle s'affiche correctement dans une nouvelle fenêtre.

Voiçi le code que j'execute :

Code :

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

1
2
3
4
5
6
 
container = document.getElementById('container');
              newBackground = document.createElement('img');
              newBackground.src = fileLink; //fileLink correspond à la value de la balise input file
              newBackground.id = "imageBackground";
              container.appendChild(newBackground);

une idée ?

Merci

[siddh]

as tu essayé avec un new Image ?

[denisC]

une idée ?

Non, il faudrait précharger l'image au chargement de ta page, mais comme tu ne la connais pas....

Seule solution (à tester) précharger l'image quand l'utilisateur la choisit, et ne l'insérer que légèrement plus tard (setTimeout).

[partyboy]

Je viens d'essayer avec le new Image et ca ne fonctionne pas ...

je vais essayer de voir du coté du preload.

si qqun a eventuellement une autre idée, je suis preneur

[denisC]

Je viens d'essayer avec le new Image et ca ne fonctionne pas ...

je vais essayer de voir du coté du preload.

si qqun a eventuellement une autre idée, je suis preneur

new Image == preload.

Pour moi, tu fais un new Image (avec le bon src), tu attends un peu, et tu l'affiches dans ta page (setTimeout).

[partyboy]

J'ai modifié mon code comme ceci, mais toujours rien :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
newImg = new Image();
              newImg.src = fileLink;
              container = document.getElementById('container');
              newBackground = document.createElement('img');
 
              //newBackground.src = fileLink;
              newBackground.src = newImg.src;
              newBackground.id = "imageBackground";
              newBackground.name = "imageBackground";
              setTimeout("container.appendChild(newBackground)",2000);

J'ai peut être pas très bien compris l'utilisation de new Image() aussi.

[denisC]

J'ai peut être pas très bien compris l'utilisation de new Image() aussi.

Si c'est bon. J'aurais mis le timeout avant la création du noeud DOM.... Essaye, on sais jamais

[partyboy]

Bon, ca fait toujours pareil

Au secours !

C'est juste le fait que javascript doit connaitre l'url de toutes les images a priori ?

[denisC]

C'est juste le fait que javascript doit connaitre l'url de toutes les images a priori ?

Non, c'est juste que IE est nul.... Tu utilises IE, non? Essaye avec Firefox, tu auras des problèmes de sécurité, mais pas celui-ci d'affichage (enfin, si tu arrives jusqu'à cette étape).

[partyboy]

Arghhhh ! non pas IE

j'utilise Firefox

bien que l'appli doit fonctionner sous IE et Firefox.

Donc non, ca ne fonctionne pas sous Firefox ...sniff

[partyboy]

j'ai essayé d'afficher une image qui était sur le serveur (url relative) et ca fonctionne sans pb.

[javatwister]

le pb vient du déclenchement de la fonction: quel événement? quel objet gestionnaire?

[partyboy]

En fait j'ai un évenement onchange sur mon <input type='file'.../>

C'est sur l'onchange que je lance la fonction qui récupere l'url et essaye d'afficher l'image.

[MasterOfChakhaL]

peut être que tu peux nous faire un petit alert sur le filelink, histoire de voir...

[partyboy]

Alors un petit alert sur le fileLink me donne :

Code :

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

1
2
 
D:\test.png

Ce qui m'a l'air correct.