DOM Compatible IE

Version imprimable

DOM Compatible IE

Salut à tous,

Après m'être arraché les cheveux pour créer un formulaire d'upload dynamique, tout content, cela fonctionne sous Firefox mais après test sous IE, j'avais une légère envie de balancer mon ecran par la fenetre :cry: . Auriez-vous quelques conseils pour rendre compatible ma fonction sous IE :calim2:

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
function formPhoto(id)
{
 
var table = document.createElement('table');
table.id = 'tableUp'+id;
 
var tr = document.createElement('tr');
var td = document.createElement('td');
td.id = 'formUp'+id;
 
var td2 = document.createElement('td');
td2.id = 'fileUp'+id;
 
var form = document.createElement('form');
form.action = 'php/annonce/uploadPhoto.php';
form.method = 'post';
form.enctype = 'multipart/form-data';
form.name = 'form'+id;
form.target = 'uploadTarget';
 
var input = document.createElement('input');
input.type = 'file';
input.name = 'photo'+id;
input.setAttribute("onChange", "uploadPhoto("+id+")");
 
var hiddenInput = document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.name = 'hiddenField';
hiddenInput.value = id;
 
td.appendChild(hiddenInput);
td.appendChild(input);
tr.appendChild(td);
tr.appendChild(td2);
table.appendChild(tr);
form.appendChild(table);
document.getElementById('formPhoto').appendChild(form);
 
}

Merci à vous

Bonjour,
il existe pour les éléments TABLE les méthodes insertRow et insertCell qui elles ne buguent pas et ce quelque soit le navigateur.

Quoiqu'il en soit IExplorer apprécie que les éléments soient appendés * au TBODY

donc il te faut
Code:

1 2 3 4 5 6 7 8 9 10 var table = document.createElement('table'); table.id = 'tableUp'+id; // AJOUT DE LA CREATION DE TBODY var tb = document.createElement('tbody'); var tr = document.createElement('tr'); //...la suite tr.appendChild(td2); // AJOUT DANS TBODY tb.appendChild(tr); table.appendChild(tb);
* pas vérifier l'existence du verbe

10/01/2011, 19h22
Bovino

+1 pour les méthodes spécifiques aux tables NoSmoking, ceci dit, je pense qu'ici le problème vient surtout de l'ajout dynamique d'éléments de formulaires et en particulier l'attribution du name par script ;)

@MichaelVDH : tu devrais regarder cette discussion : [SRC] [FORM][DOM][DYNAMIQUE]mais pas que form
10/01/2011, 20h49
NoSmoking

j'ai effectivement souvenir qu'IExplorer est un peu réticent, le mot est faible, avec les ajouts dynamiques de certains éléments et l'affectation de certains attributs, je prendrais donc le temps de lire le lien qui est indiqué ne retrouvant pas les notes que j'avais prises à ce sujet.
La prise en compte du NAME étant effective, il suffit de faire une soumission en method="GET" et de regarder la barre d'adresse, mais ne permet pas d'accéder à l'élément à travers celui ci voila le pourquoi il faut doubler par une ID identique.

J'ai également souvenir que setAttribute( 'NAME', 'le_nom'); marche si NAME est en majuscule, enfin plein de petits trucs de ce style.

Il est aussi parfois, lorsque l'on ne crée que quelques éléments en dynamique, préférable de les créer sur la page et de ce contenter de les masquer et de les afficher aux besoins.

j'en oublie sûrement...

Rha merci Micro$oft :evilred:

Je n'ai pas encore eu le temps de regarder le lien que tu m'as donné.

Mais quand je regarde dans le debugger d'IE8, mon formulaire, le code que donne ma fonction donne ceci :
Code:

1 2 3 4 5 6 <form name="form1" action="php/annonce/uploadPhoto.php" encType="multipart/form-data" method="post" target="uploadTarget"> <table id="tableUp1"> <tr> <td id="formUp1"> <INPUT value=1 type=hidden name=hiddenField> <INPUT onchange=uploadPhoto(1) value=C:\fakepath\logo.png type=file name=photo1>
pour les name j'ai effectivement du changer par un setAttribute, dans ma page de destination, je n'ai aucun soucis pour récupérer le champ "hiddenField" mais pour c'est vraiment au niveau du champ de type file que j'ai un soucis, je ne pense pas non plus que le soucis vienne de ma balise form car elle envois correctement vers mon iframe, donc toujours un peu perdu

En tout cas merci pour vos réponse

11/01/2011, 10h07
Bovino

Essaye de changer

Code:

input.setAttribute("onChange", "uploadPhoto("+id+")");

par

Code:

input.onchange = function(){uploadPhoto(id)};
11/01/2011, 10h42
MichaelVDH

Non toujours pas, par contre input.onchange = function(){uploadPhoto(id)};
fonctionne sur Firefox chose que je n'etais pas arrivé à faire sans setAttribute.

Le problème à mon avis le problème ne peut provenir que de l'input type=file

j'ai ceci comme erreur dans mon iFrame :

Notice: Undefined index: photo1 in I:\Web\Okaz\php\annonce\uploadPhoto.php on line 6

Notice: Undefined index: photo1 in I:\Web\Okaz\php\annonce\uploadPhoto.php on line 10

et photo1 correspond au champ file, donc c'est comme s'il n'arrivait pas à trouver ce champ dans mon traitement PHP, donc il ne doit pas être envoyé, je pense
11/01/2011, 11h20
RomainVALERI

Citation:

Envoyé par MichaelVDH

...donc il ne doit pas être envoyé, je pense

Plutot que de le supposer, pour en avoir le coeur net : LiveHTTPHeaders (module complémentaire sous FF)

Sous firefox je n'ai aucun problème pour le récupérer donc, oui il l'envoie mais sous FF now sous IE c'est une autre histoire.

J'ai tenté de simplifié au max mon script pour voir ce qui se passait et éliminer un max de variable :

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
<script language="javascript" type="text/javascript">
function createForm()
{
var form = document.createElement('form');
form.action = 'test.php';
form.method = 'post';
form.enctype = 'multipart/form-data';
form.setAttribute('NAME','form1');
 
var file = document.createElement('input');
file.type = 'file';
file.setAttribute('NAME','photo');
file.onchange = function(){send()};
 
var button = document.createElement('input');
button.setAttribute('NAME','button');
button.type = 'submit';
 
form.appendChild(button);
form.appendChild(file);
 
document.getElementById("formSend").appendChild(form);
}
 
 
</script>
</head>
 
<body>
<div id="formSend"><script language="javascript">createForm();</script></div>
</body>
</html>

De nouveau IE ne choppe pas mon input :cry:

11/01/2011, 11h45
Bovino

Essaye peut-être en testant le navigateur et en utilisant la syntaxe

Code:

document.createElement('<input type="file" name="photo" />')

pour IE :?
11/01/2011, 15h19
NoSmoking

Citation:

Envoyé par MichaelVDH

De nouveau IE ne choppe pas mon input

cela correspond à quoi en réalité, pas de reconnaissance, pas de transfert, pas de réception...

Si non voir les restrictions éventuelles input type=file.
12/01/2011, 13h37
MichaelVDH

@Bovino : Fonctionne pas malheureusement grrrrrrrr
@NoSmoking : Alors il se passe que lorsque j'envois mon formulaire vers mon script PHP ma variable :

Code:

$_FILE['photo']['name'];

est vide donc j'ai une erreur : Undefined index
Donc d'après moi les données du formulaire file ne sont pas envoyée

Voilà le code que j'utilise pour ajouter des champs de téléchargement dans un formulaire avec javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function addDonnee(idChamp) {
   try {
      var conteneur = document.getElementById(idChamp);
 
      var ligne = document.createElement('p');
 
      var fichier = document.createElement('input');
      fichier.setAttribute('type','file');
      fichier.setAttribute('name','userfile[]');
      fichier.setAttribute('size','89');
 
      ligne.appendChild(fichier);
      conteneur.appendChild(ligne);
   }
   catch(e) {
       alert(e);
    }
}

donc rien de particulier et ça fonctionne aussi bien avec ff que sous ie, même ie6

Code:

1
2
3
4
var fichier = document.createElement('input');
fichier.type = 'file';
fichier.name = 'userfile[]';
fichier.size = '89';

12/01/2011, 22h18
NoSmoking

revenons au fondamentaux
crée dans ta page, sans passer par une fonction JavaScript, la form et les champs qui vont bien puis fait la requête et dit nous ce qui se passe...
13/01/2011, 10h16
MichaelVDH

@Bovino & ABCIWEB : Testé et toujours pas

@NoSmoking : J'ai créé une page vierge avec juste le formulaire d'up, un bouton d'envois et sous IE8 la reception des données est ok

Capte rien la

J'ai du "nouveau"... et je ne comprends pas

J'ai voulu refaire une tentative sur cette fois sous IE7 (d'ailleurs très pratique IECollection pour faire tourner plusieurs IE sur un pc)

J'ai réussis à récupérer ma variable du formulaire dynamique dans la page "test.php" seul chose qui change comparativement à avant, j'ai appellé ma fonction dans le body avec onload
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 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Document sans titre</title> <script language="javascript" type="text/javascript"> function formu() { var form = document.createElement('form'); form.setAttribute('name','form1'); form.setAttribute('method','post'); form.setAttribute('enctype','multipart/form-data'); form.setAttribute('action','test.php'); var input = document.createElement('input'); input.setAttribute('name','photo'); input.setAttribute('type','file'); var button = document.createElement('input'); button.setAttribute('type','submit'); button.setAttribute('value','Envoyer'); form.appendChild(input); form.appendChild(button); document.getElementById('formulaire').appendChild(form); } </script> </head> <body onload="formu()"> <div id="formulaire"></div> </body>
Si vous comprenez n'hésitez pas pcq je suis largué la

13/01/2011, 16h44
RomainVALERI

Citation:

Envoyé par MichaelVDH

(d'ailleurs très pratique IECollection pour faire tourner plusieurs IE sur un pc)

Ce n'est pas un avis partagé par l'ensemble des pros du secteur ^^
13/01/2011, 16h53
Bovino

Citation:

d'ailleurs très pratique IECollection pour faire tourner plusieurs IE sur un pc

Certainemment pas :aie:

La plupart de ces softs utilisent en fait les dll de la version de IE installée sur le poste et ne sont pas vraiment fiables.
Voir : Testez vos applications Web fiablement sous les navigateurs sur ce sujet.
13/01/2011, 17h48
MichaelVDH

Bon ca va ca va j'ai rien dit :P

J'ai résolus mon problème, est-ce le code peut intéresser quelqu'un, si oui, je le poste

En tout cas merci à tous :ccool: , c'est vraiment cool, j'espère pouvoir un peu aider sur le forum avec mes maigres connaissances.
13/01/2011, 18h04
Bovino

Citation:

Envoyé par MichaelVDH

Bon ca va ca va j'ai rien dit :P

Rassure toi, on ne fait ces remarques uniquement pour que tu sois au courant ;)

Citation:

Envoyé par MichaelVDH

J'ai résolus mon problème, est-ce le code peut intéresser quelqu'un, si oui, je le poste.

Oui, ça peut toujours être utile si d'autres se retrouvent dans le même cas :)

index.php

Code:

1
2
3
4
5
6
 
<script type="text/javascript" src="function.js"></script>
 
<div id="formPhoto"></div>
<div id="previewPhoto"></div>
<iframe width="0px" height="0px" frameborder="0" name="uploadTarget"></iframe>

Explication :
div --> formPhoto : l'endroit ou sera généré le formulaire
div --> previewPhoto : l'endroit ou sera généré les prévisualisation
iframe --> Elle sert à exécuter le script PHP d'upload etc... elle doit porter un nom dans ce cas-ci "uploadTarget"

function.js

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
 
window.onload = function(){formPhoto(1)};
function formPhoto(id)
{
var table = document.createElement('table');
table.id = 'tableUp'+id;
table.setAttribute('border','0');
table.setAttribute('cellpadding','0');
table.setAttribute('cellspacing','0');
 
var tr = document.createElement('tr');
var td = document.createElement('td');
td.id = 'formUp'+id;
 
var td2 = document.createElement('td');
td2.id = 'fileUp'+id;
 
var form = document.createElement('form');
form.setAttribute('action','php/annonce/uploadPhoto.php');
form.setAttribute('method','post');
form.setAttribute('enctype','multipart/form-data');
form.setAttribute('target','uploadTarget');
form.setAttribute('name','form'+id);
 
var input = document.createElement('input');
 
input.setAttribute("type","file");
input.setAttribute("name", "photo"+id);
input.setAttribute("onChange", "uploadPhoto("+id+")");
 
var hiddenInput = document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.value = id;
hiddenInput.setAttribute("name","hiddenField");
 
td.appendChild(hiddenInput);
td.appendChild(input);
tr.appendChild(td);
tr.appendChild(td2);
table.appendChild(tr);
form.appendChild(table);
 
document.getElementById('formPhoto').appendChild(form);
 
}
 
function uploadPhoto(id)
{
	document.getElementById("fileUp"+id).innerHTML = "<img src=img/chargeur.gif />Chargement en cours";
	document.forms["form"+id].submit();
}
 
function uploaded(nPhoto, id)
{
	document.getElementById("fileUp"+id).innerHTML = "<a href=# onclick=previewPhoto('"+nPhoto+"')>"+nPhoto+"</a>";
	document.getElementById("previewPhoto").innerHTML = "<img src=http://localhost/okaz/temp/"+nPhoto+" alt="+nPhoto+" />";
	id++;
	formPhoto(id);
}
 
function previewPhoto(nPhoto)
{
	document.getElementById("previewPhoto").innerHTML = "<img src=http://localhost/okaz/temp/"+nPhoto+" alt="+nPhoto+" />";
}
 
function errorUpload(id, erreur)
{
	var error = new Array ;
 	error[0] = 'Extension du fichier incorrecte';
	error[1] = 'Le fichier est trop gros';
	error[2] = 'Erreur lors du transfert de fichier';
 
	document.getElementById("fileUp"+id).innerHTML = error[erreur];
}

Explication :
window.onload = function(){formPhoto(1)}; : seul moyen trouvé pour faire fonctionner le script sous IE8

formPhoto(id) --> Génération d'une balise <form> contenant un tableau de 2 colonne, l'un contient l'input (file) et l'autre contiendra le lien vers le fichier uploadé, un champ caché est créé pour permettre de récupérer l'ID du formulaire dans le script de PHP, lorsqu'une image est selectionnée elle appelle la fonction uploadPhoto()

uploadPhoto() --> Celle-ci sert à envoyé le formulaire au script PHP et à placer une image loading

previewPhoto(nPhoto) --> fonction permettant de prévisualiser l'image uploadée en cliquant sur un lien

uploaded(nPhoto, id) --> fonction indiquant un lien avec le nom de l'image et son extension et inseré un lien pointant vers previewPhoto, cette fonction est appellé dans le script PHP

errorUpload(id, erreur) --> indique les différentes erreurs, la fonction est appellée dans le script PHP

uploadPhoto.php

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
 
$uploadDir = '/temp/';
 
$id = $_POST['hiddenField'];
$input = 'photo'.$id;
$filename = $_FILES[$input]['name'];
$extension = strrchr($filename,'.');
$extension=substr($extension,1) ;   
$extension = strtolower($extension);
$size = $_FILES[$input]['size'];
$imageLink = $uploadDir.''.$filename;
 
//$imageSize = getimagesize($imageLink);
//print_r($imageSize);
 
//Limite de taille 250ko
$sizeMax = 256000;
 
 
if ($extension == 'png' or $extension == 'jpg' or $extension == 'jpeg' or $extension == 'gif')
{
	if ($size <= $sizeMax)
	{
		$target_path = $uploadDir . basename($_FILES[$input]['name']);
 
		if (@move_uploaded_file($_FILES[$input]['tmp_name'], $target_path))
		{
			echo 'Upload OK';
			echo '<script language="javascript">window.top.uploaded("'.$_FILES[$input]['name'].'","'.$id.'");</script>';
		}
		else
		{
				echo 'soucis 2';
				echo '<script language="javascript">window.top.errorUpload("'.$id.'","2");</script>';
 
		}
	}
	else
	{
			echo 'soucis 1';
			echo '<script language="javascript">window.top.errorUpload("'.$id.'","1");</script>';
	}
}
else
{
			echo 'soucis 0';
			echo '<script language="javascript">window.top.errorUpload("'.$id.'","0");</script>';
}

Ce script n'est pas totalement terminé, il faut encore renommer les fichier uploadé pour eviter les doublons et resizer avec proportion les preview.

Voilà j'espere que se sera utile à quelqu'un

13/01/2011, 18h41
Eric2a

Citation:

Envoyé par NoSmoking

IExplorer apprécie que les éléments soient appendés * au TBODY...

* pas vérifier l'existence du verbe

:lol:

Citation:

Envoyé par MichaelVDH

J'ai résolus mon problème, est-ce le code peut intéresser quelqu'un

Oui toujours. Pour avoir du code IE... compatible DOM.
13/01/2011, 18h59
NoSmoking

Citation:

Citation:

J'ai réussis à récupérer ma variable du formulaire dynamique dans la page "test.php" seul chose qui change comparativement à avant, j'ai appellé ma fonction dans le body avec onload

Citation:

Si vous comprenez n'hésitez pas pcq je suis largué la

Imaginons que tu construises une maison, ici le document, qui a reçu l'agrément de l'architecte, validation W3C en somme, le maître d'oeuvre, le moteur de browser, planifie sa tâche en fonction des éléments qui lui parviennent et demande à ses ouvriers, le moteur du navigateur de s'occuper de tout cela.

Si au départ il est prévu un plan de travail dans la cuisine alors no problem tout est prévu ils savent comment procéder, mais si soudain tu envoies de nouvelles consignes aux ouvriers pour mettre en place ledit plan de travail que tu avais oublié alors là cela va dépendre du maître d'oeuvre et de ses ouvriers.

Tout le monde s'active, c'est le chantier complet pour livrer la maison le plus rapidement possible et "on vient me foutre le souk!" s'écrit le maître d'ouvrage, "bon on connait, c'est plein de gens comme cela sur la toile on maîtrise, je re-hiérarchise les travaux, on re-fixe les priorités" etc...et ça roule.

Ca c'est le meilleur des cas dans l'autre cas la perturbation peut engendrer des conflits divers, untel qui a une ID s'impose devant celui dont on ne se rappellera pas le NOM, enfin, ce sont des professionnel, alors ils s'en sortent mais que ce fut dur!

Le seul problème c'est que certaines fois il y a des effets de bord, qui il est vrai la plupart du temps ne sont pas gênant car le maître d'ouvrage les a corrigé de lui même, c'est il en voit de toutes les couleurs même des canapés dans les WC il paraît entre autre armoire dans les escaliers, il n'y a qu'a demander à Validator le guerrier.

Il aurait préféré de loin qu'on lui fasse ajouter le plan de travail une fois la maison terminée, plus de petit tracas à gérer, il a le temps de s'organiser tranquillement, c'est cela le onload.

Tout cela pour dire pourquoi ajouter un élément quand on sait que l'on va le mettre quoiqu'il arrive, autant le prévoir de manière traditionnelle tout de suite, cela ne prend pas bien de temps et évites des remues méninges.

Ce scénario n'est que pure fiction
13/01/2011, 19h14
MichaelVDH

Je te remercis pour cette jolie histoire lol

J'ai compris ou tu souhaitais en venir :mrgreen:

Oui c'est certain que tu aurais pu faire beaucoup plus simple, mais au passage tu auras appris (c'est le même principe) comment ajouter un champ de téléchargement dans un formulaire avec javascript et ça c'est pratique ;)

Sinon concernant le onload il vaut mieux utiliser une fonction qui ajoute la fonction dans la liste des évènements onload, du genre :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function formPhoto (id) { //... } function AddLoad(func) { if (window.addEventListener) { window.addEventListener("load", func, false); } else if (document.addEventListener) { document.addEventListener("load", func, false); } else if (window.attachEvent) { window.attachEvent("onload", func); } } //chargment onload de la fonction formPhoto avec son paramètre AddLoad(function(){formPhoto(1))});
ça évite des conflits avec d'éventuelles autres fonctions javascript qui feraient appel à cet évènement.

13/01/2011, 22h50
MichaelVDH

Merci ABCIWEB en réalité au départ je ne savais justement pas comment automatiquement ajouter un champ formulaire avec etc..., donc je ne voyais que la possibilité d'utiliser les DOM maintenant oui c'est certain qu'il y avait plus simple, mais je relativise en me disant que je comprends bcp mieux le fonctionnement des DOM :mrgreen:

Pour ce qui est de ton script, c'est surement une question bete, mais je ne comprends pas ta condition, c-à-d comment il sait quelle condition executer ? Est ce que par exemple je dois le définir dans <body onload="AddLoad(function(){formPhoto(1))});" ?

Bete question dans un soucis de perfectionnement est-ce que mon script vous parait correct (sécurité, syntaxe, methode) ?
13/01/2011, 23h40
ABCIWEB

AddLoad(function(){formPhoto(1))}); remplace le onload ='formPhoto(1)' placé dans la balise body ou le window.onload = function(){formPhoto(1)}; placé entre les balises "<script>"

Mais bon si tu refais ton code d'une façon plus classique (et simple) c'est à dire un formulaire standard en html avec juste une fonction javascript pour ajouter un champ de téléchargement, tu n'auras pas besoin d'utiliser l'évènement onload dans ce cas. Et d'ailleurs avec l'expérience que tu viens d'acquérir ça ne devrait pas te prendre beaucoup de temps :)

Le "onload" gardes-le pour de meilleurs occasions :)
14/01/2011, 09h07
MichaelVDH
Justement j'ai commencé avec un formulaire classique ou je faisais un
Code:

1 2 document.getElementById('formPhoto').innerHTML = <form name= form"+id+" action=uploadPhoto.php>
La soucis était justement que je n'arrivais pas à ajouter dans mon tableau un champ en plus d'ou cette méthode complexe :?
14/01/2011, 10h13
NoSmoking

Citation:

La soucis était justement que je n'arrivais pas à ajouter dans mon tableau un champ en plus d'ou cette méthode complexe

la méthode n'est pas complexe mais requière justement de la méthode et une bonne définition de son besoin.
14/01/2011, 15h41
ABCIWEB

Je l'ai déjà donné le code que j'utilise pour ajouter un champ de téléchargement Dans ma fonction, idChamp c'est l'id d'un "div" ou d'un "p" existant à l'intérieur du formulaire. Et c'est tout !

Sinon tu te complique la vie avec des tableaux pour un simple formulaire. La bonne pratique est d'utiliser les css avec des div etc. et de réserver les tableaux pour présenter des données tabulaires.