Chargement d'image impossible en DOM : [resolu]

Question

pecos

5 Oct 2007 à 13:13

[edit : je change le titre... c'était pas très clair]
bonjour à tous,
pour mon premier message sur ce forum, je voulais dire avant tout, tout le bien que je pense de ce site et de ce forum qui m'ont souvent tiré d'affaire, sans compter la source d'inspiration inépuisable que représente les articles du site pour progresser en dev web...

il se trouve que j'ai toutefois un petit souci avec le bout de code qui suit, d'où mes interrogations...
Le bout de code en question fait partie d'un genre de CMS que j'ai écrit l'année dernière, son but est de charger très classiquement dans une console d'administration une page HTML complète, dont les données résident dans une BDD mySQL, de façon à ce que l'utilisateur puisse modifier entièrement la page complète en local, sans la recharger, (images, textes et styles) et envoyer à la fin le résultat à la base via PHP.
Jusqu'à preuve du contraire (c'est à dire que je n'ai pas regardé ce projet depuis +6 mois... Smiley confused

) tout cela marchait fort bien et j'ai écris moi-même et modifié des articles sans souci.
Mais voilà maintenant que ça ne fonctionne plus !!!
Plus précisément, le code qui chargeait une image à la volée depuis le disque dur de l'internaute ne fonctionne plus, alors qu'il tournait fort bien !

voici ce bout de code fautif :

function instal_im(image, nom, ident)
	{
	with(document)
		{
		getElementById('reglagesimage').removeAttribute("class");
		getElementById('reglagesimage').removeAttribute("className");
		var numero = parseInt(getElementById('numero_paragraphe').value);
		if(ident.substr(0,7) =="_charge")
			{
			getElementById(ident).setAttribute("name", "userfile"+numero);
			getElementById(ident).setAttribute("id", "_userfile"+numero);
			}
		var nomfichier = "file://"+image;
		nouvim = new Image();
		nouvim.src = nomfichier;
		 
		var nouvelleimg = createElement("img");
		with(nouvelleimg)
			{
			setAttribute("src", nomfichier);
			setAttribute("align", "left");
			setAttribute("name", "image"+numero);
			setAttribute("id", "img"+numero);
			setAttribute("class", "margeleft");
			setAttribute("className", "margeleft");
			}
		getElementById("ART").insertBefore(nouvelleimg, getElementById("_style"+numero));
}

(cette fonction est plus complexe en fait mais j'ai juste gardé la partie qui merde... Smiley cligne

)

quelques précisions :
• je code sur mac OSX.4.10
• les essais sont réalisés sur safari, firefox, et IE6 PC via une machine virtuelle parallels.
• avec safari, aucune image ne se charge, mais le texte dans la page se décale d'un caractère.
• avec firefox, la boite correspondant à la taille de l'image se charge, mais l'image est manquante.
• avec IE6, curieusement, l'image se charge parfaitement(donc en passant par le réseau), comme il en a toujours été !
• dernière chose : l'image est bel et bien chargée par le champ file dont voici pour mémoire le bout de code (en php)...:

for ($i=1;$i<9;$i++)
			{
			echo "<input  type='file' size='10' name='charge$i' id='_charge$i' class='upload' ";
			echo " onclick='javascript:recup_bon(this.name)' onchange='javascript:instal_im(this.value, this.name, this.id)'><br>";
			}

Alors... je soupçonne un problème dans la syntaxe du chemin d'accès, à la ligne :

var nomfichier = "file://"+image;

mais je ne suis pas sûr du tout... Smiley confused

en tous cas, si je remplace dans le code cette variable "nomfichier" par "1.jpg" (C.A.D.une image présente dans le même répertoire que la page d'admin), elle se charge correctement !!! (mais ça ne m'intéresse pas du tout...)

voilà, j'espère avoir été assez clair, et je m'excuse par avance si un sujet similaire a déjà été traité sur ce forum, je n'ai pas trouvé...
Modifié par pecos (06 Oct 2007 - 10:59)

FlorentG

5 Oct 2007 à 14:32

Euh... Je trouve extrêmement louche le coup du file:// Smiley eek

Tu ne peux pas passer par http:// normal ?

pecos

5 Oct 2007 à 14:44

le problème c'est que j'avais dû trouver (à l'époque) cette méthode avec "file://" et que ça fonctionnait !! (d'ailleurs ça fonctionne toujours avec IE6 en passant dans la machine virtuelle... Smiley ohwell

)

j'ai essayé avec http://, ça ne fonctionne pas plus... tout juste si ça me charge maintenant une petite icone "image manquante" à la place de... rien.

personne ne connaitrais un exemple de code de chargement dynamique d'image sur une machine distante ? (pour que je l'examine...)

FlorentG

5 Oct 2007 à 14:47

Tu ne peux pas utiliser file://, vu qu'il cherche alors sur le système local... Si ton site est en ligne, ça va faire drôle. A moins que ce ne soit voulu ?

pecos

5 Oct 2007 à 15:02

ben le principe était de charger l'image dans l'instance actuelle de la page en RAM chez le client, donc bien en local, de traiter toutes les modifs grace à javascript/DOM, puis lorsque tout est fait, d'envoyer toutes les données au serveur via PHP. c'est pour ça que j'avais mis "file://"
ce que je veux dire, c'est que le script javascript reste entièrement en local, donc...

(de toutes façons, lors de l'envoi final en php pour inscription dans la base de donnée, le script utilise le champ de formulaire "file" qui contient tout ce qu'il faut pour uploader l'image correctement.)

est-ce assez clair ?

edit : je viens d'essayer avec ce code trouvé ailleurs :

function instal_im(image, nom, ident)
	{
	var nomfichier = "file://"+image;
	var oImg = new Image();
			oImg.id = 'gdim';
			oImg.src = nomfichier;
			oImg.width = '240';
			oImg.height = '124';
			oImg.alt = 'titi';
			document.body.appendChild(oImg);
	
	}

Même punition : j'ai une case vide à la place de l'image...
Pour info, voici ce que m'indique la console de FF lorsque je tente le chargement d'une image :

a écrit :
Erreur de sécurité : le contenu situé à http://localhost/antiopa-nature/administration.php?page=1234568004 ne peut pas charger de données ou établir un lien vers file:///Users/pecos/SITES/antiopa-nature/sources/1.jpg.

et ce qu'elle me met si je demande "afficher l'image" avec le menu contextuel :

a écrit :
Erreur : uncaught exception: Load of file:///Users/pecos/SITES/antiopa-nature/sources/1.jpg from http://localhost/antiopa-nature/administration.php?page=1234568004 denied.

cela dit-il quelque chose à quelqu'un ?
Modifié par pecos (05 Oct 2007 - 16:35)

~~supprimé~~

6 Oct 2007 à 06:55

Ce que tu cherches à faire est stupide.
Pourquoi vouloir conserver le "file://" ???
Ta réponse n'a aucun sens quand tu parles de laisser l'image dans la RAM.
Je ne vois pas en quoi avoir une image sur un serveur est gênant ? cette image tu ne peux rien lui faire en local de toute façon, tu ne peux pas la transformer.

Donc il doit y avoir un prblème de conception quelque part qui t'oblige à faire comme ça.
C'est gros comme une maison

pecos

6 Oct 2007 à 10:58

oulah, on se calme GATSU...
ça n'a rien de stupide : le principe est de charger une page complète chez le client, dans le module d'administration, de la modifier dans un éditeur html/javascript évolué ressemblant à un éditeur web wisiwig, puis lorsque tout est fini, mais seulement là, d'envoyer le tout au serveur en PHP.
Les images échangées ou insérées dans la mise en page, doivent donc bel et bien dans ce cas résider sur le disque dur du client, et le seul moyen d'y accéder est d'utiliser "file://", puisque le client n'est pas censé posséder un serveur HTTP.

Pour ta gouverne, on peut faire des tas de chose à une image, en local : la redimensionner en live dans la page, la déplacer à un autre endroit dans la page, l'effacer, en remettre une autre, l'encadrer. Tout ce qu'on fait avec un éditeur web classique wisiwig, en fait...

Et de toutes façon, une très longue soirée m'a permis de résoudre ce problème qui n'était dû, en fait, qu'à un problème de navigateurs.
La réinstallation de Safari 2 (j'utilisais le 3Beta), puis la mise à jour de firefox (je n'avais que la 1.5 sur cette machine), ont permis en effet à mon code de refonctionner parfaitement !
Merci ! Smiley cligne

~~supprimé~~

6 Oct 2007 à 17:08

pecos a écrit :
oulah, on se calme GATSU...
ça n'a rien de stupide : le principe est de charger une page complète chez le client, dans le module d'administration, de la modifier dans un éditeur html/javascript évolué ressemblant à un éditeur web wisiwig, puis lorsque tout est fini, mais seulement là, d'envoyer le tout au serveur en PHP.
Les images échangées ou insérées dans la mise en page, doivent donc bel et bien dans ce cas résider sur le disque dur du client, et le seul moyen d'y accéder est d'utiliser "file://", puisque le client n'est pas censé posséder un serveur HTTP.

Pour ta gouverne, on peut faire des tas de chose à une image, en local : la redimensionner en live dans la page, la déplacer à un autre endroit dans la page, l'effacer, en remettre une autre, l'encadrer. Tout ce qu'on fait avec un éditeur web classique wisiwig, en fait...

Et de toutes façon, une très longue soirée m'a permis de résoudre ce problème qui n'était dû, en fait, qu'à un problème de navigateurs.
La réinstallation de Safari 2 (j'utilisais le 3Beta), puis la mise à jour de firefox (je n'avais que la 1.5 sur cette machine), ont permis en effet à mon code de refonctionner parfaitement !
Merci !

Ouais mais en fait tu ne peux pas faire ça, les images que tu rajoutes doivent etre uploadés via une technique pseudo Ajax (ce qui t'evitera de recharger là page) et ensuite le serveur te retourne une url d'image stockée temporairement dans un dossier.
et là tu affiches l'image dans l'editeur via l'url recupérée

C'est la seul méthode possible.

ET ce n'est pas en mettant à jour un navigateur qu'un probleme est résolu.
Accessoirement, quand je parle de modifier une image, je parle de la modifier graphiquement, car le reste des actions que tu as indiqué, ne sont que des actions DOM
Modifié par Gatsu35 (06 Oct 2007 - 17:11)

pecos

7 Oct 2007 à 10:44

mais que me raconte tu là, gatsu ?
nimportenawak gatsu !!! bien sûr que je peux faire ça !!!
• je charge en local mes images dans ma page par des champs "file" et le DOM,
• je les tritures par javascript en gardant les infos de modifications dans des champs cachés,
• pendant ce temps, les références à mes multiples images sont gardées dans les VALUES des champs "file" correspondant.

et... à la fin, j'upload tous les champs de formulaire (cachés ou non) et tous les champs file (pour les images) d'un seul coup vers ma page de script PHP sur le serveur.
c'est beaucoup plus rapide que de passer par AJAX, car les images ne sont jamais uploadées avant la fin de mise en forme de toute la page Smiley smile

Un peu d'ouverture d'esprit, que diable !!! Smiley smile

Tymlis

9 Oct 2007 à 17:00

Voila de bien bonnes idées tout ça pecos, ça doit être un peu casse-gueule à mettre en place un wysiwyg évolué comme ça en javascript, mais je salue la performance.

Gatsu, pecos n'uploade aucune image sur le serveur avant validation totale du formulaire, il gere juste des images se trouvant sur le disque dur de l'utilisateur, grace au protocole file:// (qui semble assez foireux/protégé cela-dit) et non pas http://

Le seul point où je rejoins gatsu est sur le fait que mettre un jour un navigateur n'a jamais résolu un problème de fond, surtout dans le cas d'un éditeur wysiwyg, si tout le monde ne voit pas la même chose c'est un peu embetant ^^

Sujet clos