Récupération $_FILES impossible sous IE6 et 7

Version imprimable

26/08/2009, 11h55
noxiox

Récupération $_FILES impossible sous IE6 et 7

Bonjour,

Je vous expose mon problème qui ne ce produit seulement sur Internet Explorer 6 et 7 mais pas sous Firefox 2 et 3.

J'ai une page php avec des informations dans une cellule d'un tableau. En cliquant sur un bouton "modifier" je créer un formulaire en javascript (avec des document.createElement) qui remplace le contenu de la cellule par le formulaire créé.

Dans ce formulaire j'ai un input type file, un input type hidden MAX_FILE_SIZE et dans ma balise form j'ai bien défini l'attribut enctype='multipart/form-data'

Quand je submit mon formulaire, je fait un print_r($_FILES); .
Sous Firefox cela me renvoi un tableau rempli, sous IE ça me renvoi Array(). Donc un tableau vide.

Savez-vous d'où peut provenir mon problème ?

Je vous remercie par avance pour l'aide que vous pourrez m'apportez.
26/08/2009, 12h01
Celira

De but en blanc, comme ça je vois pas... On peut voir le code source du formulaire et celui du script d'arrivée ?

Salut,

Pour le code source du formulaire (génération en javascript)

J'explique rapidement, mon <form> existe deja donc je modifie juste les attributs comme besoin.

Code 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
 
function chargerEch(p_s_donnees){
	if(p_s_donnees.length >8) {
		g_b_formEdit = true;
		var l_a_tab = p_s_donnees.split('|');
		var l_a_tmpEchID = l_a_tab[1].split(':');
		var l_a_tmpEchRef = l_a_tab[2].split(':');
		var l_a_tmpResId = l_a_tab[3].split(':');
		var l_a_tmpResNom = l_a_tab[4].split(':');
 
		var l_o_formAjout = document.getElementById('saisieEchRefDos');
		var l_o_oldMaxFileSize = document.getElementById('MAX_FILE_SIZE');
		l_o_formAjout.removeChild(l_o_oldMaxFileSize);
		var l_o_spanRef = document.createElement('span');
		l_o_spanRef.innerHTML='Référence : ';
		//on stock l'input type hidden contenant la ref de l'art clt
		var l_o_input = document.getElementById('refEch'+l_a_tmpEchID[1]);
 
		// on récupère la td parent
		var l_o_td = l_o_input.parentNode;
		//supression de l'input hidden ref artc clt
		l_o_td.removeChild(l_o_input);
		// on vide le contenu de la td
		l_o_td.innerHTML = "<input type='hidden' value='250000' name='MAX_FILE_SIZE' />";
		//création input pour idEch
		var l_o_inputIdEch = document.createElement('input');
		l_o_inputIdEch.setAttribute('type','hidden');
		l_o_inputIdEch.setAttribute('name','idEchEdit');
		l_o_inputIdEch.setAttribute('id','idEchEdit');
		l_o_inputIdEch.setAttribute('value',l_a_tmpEchID[1]);
		//création input pour idImg
		var l_o_inputIdImg = document.createElement('input');
		l_o_inputIdImg.setAttribute('type','hidden');
		l_o_inputIdImg.setAttribute('name','idRes');
		l_o_inputIdImg.setAttribute('id','idRes');
		l_o_inputIdImg.setAttribute('value',l_a_tmpResId[1]);
 
		var l_o_brRef = document.createElement('br');
		// affecte a la td l'input idEch
		l_o_td.appendChild(l_o_inputIdEch);
		// affecte a la td l'input idImg
		l_o_td.appendChild(l_o_inputIdImg);
		// affecte a la td du spanRef
		l_o_td.appendChild(l_o_spanRef);
		//input ref article client
		l_o_inpurRef = document.createElement('input');
		l_o_inpurRef.setAttribute('type','text');
		l_o_inpurRef.setAttribute('maxlength','255');
		l_o_inpurRef.setAttribute('class','inputRefEch');
		l_o_inpurRef.setAttribute('id','refEch'+l_a_tmpEchID[1]);
		l_o_inpurRef.setAttribute('name','refEch'+l_a_tmpEchID[1]);
		l_o_inpurRef.setAttribute('value',l_a_tmpEchRef[1]);
		// affecte a la td l'input 
		l_o_td.appendChild(l_o_inpurRef);
		//ajout à la td du br
		l_o_td.appendChild(l_o_brRef);
		// modifie le type de l'input hidden en type textpour permettre l'édition
 
		//span image associée
		var l_o_span = document.createElement('span');
		l_o_span.innerHTML = 'Image associée : ';
		//ajout à la td du span
		l_o_td.appendChild(l_o_span);
		//Ref de l'image associée
		var l_o_spanImg = document.createElement('span');
		if(l_a_tmpResNom[1]!=''){
			l_o_spanImg.innerHTML=l_a_tmpResNom[1];
		}else{
			l_o_spanImg.innerHTML='Aucune image'
		}
		//ajout à la td du span
		l_o_td.appendChild(l_o_spanImg);
		//création input pour image
		var l_o_inputImg = document.createElement('input');
		l_o_inputImg.setAttribute('type','file');
		l_o_inputImg.name ='imgEditEch';
		//l_o_inputImg.setAttribute('id','imgEditEch');
 
		//ajout à la td du input maxfilesize
		//l_o_td.appendChild(l_o_inputMaxFile);
		//ajout à la td du input image
		l_o_td.appendChild(l_o_inputImg);
		//création btn enregistrer
		var l_o_btnEnr = document.createElement('input');
		l_o_btnEnr.setAttribute('type','button');
		l_o_btnEnr.setAttribute('name','modifier');
		l_o_btnEnr.setAttribute('value','Enregistrer');
		l_o_btnEnr.onclick = function (){traitementFormEdit(l_o_inpurRef);}
		//création btn annuler
		var l_o_btnAnn = document.createElement('input');
		l_o_btnAnn.setAttribute('type','reset');
		l_o_btnAnn.setAttribute('name','annuler');
		l_o_btnAnn.setAttribute('value','Annuler');
		var l_o_brBtn = document.createElement('br');
		//ajout à la td du saut de ligne
		l_o_td.appendChild(l_o_brBtn);
		//ajout à la td du btn enregistrer
		l_o_td.appendChild(l_o_btnEnr);
		//ajout à la td du btn annuler
		l_o_td.appendChild(l_o_btnAnn);
		var l_o_form = document.getElementById('listeEchantillon');
		//modife action du form pour submit edition  
		l_o_form.setAttribute('action','index.php?action=echantillon&sousAction=editEch')
		l_o_form.setAttribute('enctype','multipart/form-data');
	}
	return false;
}

Pour le code générer sous IE je peux pas car c'est fait par javascript et dans le code source les champs n'apparaissent pas.

Bonjour et bienvenue sur développez. ;)

Citation:

l_o_td.innerHTML = "<input type='hidden' value='250000' name='MAX_FILE_SIZE' />"

N'utilise pas innerHTML pour créé un élément mais utilise DOM comme les autres.
La modification de l'attribut name est déprécié avec IE.
Code:

1 2 3 4 5 6 7 8 9 10 11 if(document.all)//Pour IE { var l_o_inputIdEch = document.createElement('<input name="idEchEdit">'); } else { var l_o_inputIdEch = document.createElement('input'); l_o_inputIdEch.setAttribute('name','idEchEdit'); } l_o_inputIdEch.setAttribute('type','hidden'); ....
Un code source dans la contribution qui pourra t'aider beaucoup pour la création d'une formulaire dynamique:
http://www.developpez.net/forums/d53...ynamique-form/

26/08/2009, 13h11
noxiox

Merci pour ta solution, mes éléments se créent bien avec un name (chose que je n'avais pas avant). Mais mon tableau $_FILES reste toujours vide.
26/08/2009, 13h59
andry.aime

Tu as tous modifier la création des éléments avec l'attribution de ses name?
26/08/2009, 14h16
noxiox

Oui, tous mes éléments sont modifiés comme tu me la conseillé.
26/08/2009, 15h03
sabotage

A quoi ressemble le formulaire final ?
26/08/2009, 15h56
noxiox
Le formulaire final est composé de
- un champ texte
- un champ input type file
- un bouton enregistrer
- un bouton annuler (reset)
26/08/2009, 15h59
sabotage

certes mais en HTML ca donne quoi reellement ?
26/08/2009, 16h04
noxiox

Comme dit précédemment je ne peux pas donner le code source généré par IE car le formulaire est créé en javascript donc il n'est pas affiché.
26/08/2009, 16h07
andry.aime

Fait voir ton code JS final.

Voici mon code final :

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
function chargerEch(p_s_donnees){
	if(p_s_donnees.length >8) {
		g_b_formEdit = true;
		var l_a_tab = p_s_donnees.split('|');
		var l_a_tmpEchID = l_a_tab[1].split(':');
		var l_a_tmpEchRef = l_a_tab[2].split(':');
		var l_a_tmpResId = l_a_tab[3].split(':');
		var l_a_tmpResNom = l_a_tab[4].split(':');
 
		var l_o_spanRef = document.createElement('span');
		l_o_spanRef.innerHTML='Référence : ';
		//on stock l'input type hidden contenant la ref de l'art clt
		var l_o_input = document.getElementById('refEch'+l_a_tmpEchID[1]);
 
		// on récupère la td parent
		var l_o_td = l_o_input.parentNode;
		//supression de l'input hidden ref artc clt
		l_o_td.removeChild(l_o_input);
		// on vide le contenu de la td
		l_o_td.innerHTML="";
		if(document.all)//Pour IE
		{
			var l_o_inputMaxFileSize = document.createElement('<input name="MAX_FILE_SIZE" type="hidden" value="250000"/>');
		}
		else
		{
			var l_o_inputMaxFileSize = document.createElement('input');
			l_o_inputMaxFileSize.setAttribute('name','MAX_FILE_SIZE');
			l_o_inputMaxFileSize.setAttribute('type','hidden');
			l_o_inputMaxFileSize.setAttribute('value','250000');
		}
 
		//création input pour idEch
 
		if(document.all)//Pour IE
		{
			var l_o_inputIdEch = document.createElement('<input name="idEchEdit" id="idEchEdit" value="'+l_a_tmpEchID[1]+'" type="hidden"  />');
		}
		else
		{
			var l_o_inputIdEch = document.createElement('input');
			l_o_inputIdEch.setAttribute('type','hidden');
			l_o_inputIdEch.setAttribute('name','idEchEdit');
			l_o_inputIdEch.setAttribute('id','idEchEdit');
			l_o_inputIdEch.setAttribute('value',l_a_tmpEchID[1]);	
		}
		//création input pour idImg
		if(document.all)//Pour IE
		{
			var l_o_inputIdImg = document.createElement('<input name="idRes" id="idRes" value="'+l_a_tmpResId[1]+'" type="hidden"  />');
		}
		else
		{
			var l_o_inputIdImg = document.createElement('input');
			l_o_inputIdImg.setAttribute('type','hidden');
			l_o_inputIdImg.setAttribute('name','idRes');
			l_o_inputIdImg.setAttribute('id','idRes');
			l_o_inputIdImg.setAttribute('value',l_a_tmpResId[1]);	
		}
 
		var l_o_brRef = document.createElement('br');
		// affecte a la td l'input idEch
		l_o_td.appendChild(l_o_inputIdEch);
		// affecte a la td l'input idImg
		l_o_td.appendChild(l_o_inputIdImg);
		// affecte a la td du spanRef
		l_o_td.appendChild(l_o_spanRef);
		//input ref article client
 
		if(document.all)//Pour IE
		{
			var l_o_inpurRef = document.createElement('<input class="inputRefEch" maxlength="255" name="refEch'+l_a_tmpEchID[1]+'" id="refEch'+l_a_tmpEchID[1]+'" value="refEch'+l_a_tmpEchRef[1]+'" type="text"  />');
		}
		else
		{
			l_o_inpurRef = document.createElement('input');
			l_o_inpurRef.setAttribute('type','text');
			l_o_inpurRef.setAttribute('maxlength','255');
			l_o_inpurRef.setAttribute('class','inputRefEch');
			l_o_inpurRef.setAttribute('id','refEch'+l_a_tmpEchID[1]);
			l_o_inpurRef.setAttribute('name','refEch'+l_a_tmpEchID[1]);
			l_o_inpurRef.setAttribute('value',l_a_tmpEchRef[1]);	
		}
		// affecte a la td l'input 
		l_o_td.appendChild(l_o_inpurRef);
		//ajout à la td du br
		l_o_td.appendChild(l_o_brRef);
		// modifie le type de l'input hidden en type textpour permettre l'édition
 
		//span image associée
		var l_o_span = document.createElement('span');
		l_o_span.innerHTML = 'Image associée : ';
		//ajout à la td du span
		l_o_td.appendChild(l_o_span);
		//Ref de l'image associée
		var l_o_spanImg = document.createElement('span');
		if(l_a_tmpResNom[1]!=''){
			l_o_spanImg.innerHTML=l_a_tmpResNom[1];
		}else{
			l_o_spanImg.innerHTML='Aucune image'
		}
		//ajout à la td du span
		l_o_td.appendChild(l_o_spanImg);
		//création input pour image
		if(document.all)//Pour IE
		{
			var l_o_inputImg = document.createElement('<input name="imgEditEch" type="file" />');
		}
		else
		{
			var l_o_inputImg = document.createElement('input');
			l_o_inputImg.setAttribute('type','file');
			l_o_inputImg.name ='imgEditEch';
		}
 
		//ajout à la td du input maxfilesize
		l_o_td.appendChild(l_o_inputMaxFileSize);
		//ajout à la td du input image
		l_o_td.appendChild(l_o_inputImg);
		//création btn enregistrer
		if(document.all)//Pour IE
		{
			var l_o_btnEnr = document.createElement('<input name="modifier" type="button" value="Enregistrer" />');
		}
		else
		{
			var l_o_btnEnr = document.createElement('input');
			l_o_btnEnr.setAttribute('type','button');
			l_o_btnEnr.setAttribute('name','modifier');
			l_o_btnEnr.setAttribute('value','Enregistrer');
 
		}
		l_o_btnEnr.onclick = function (){traitementFormEdit(l_o_inpurRef);}
		//création btn annuler
		if(document.all)//Pour IE
		{
			var l_o_btnAnn = document.createElement('<input name="annuler" type="reset" value="Annuler" />');
		}
		else
		{
			var l_o_btnAnn = document.createElement('input');
			l_o_btnAnn.setAttribute('type','reset');
			l_o_btnAnn.setAttribute('name','annuler');
			l_o_btnAnn.setAttribute('value','Annuler');		
		}
 
		var l_o_brBtn = document.createElement('br');
		//ajout à la td du saut de ligne
		l_o_td.appendChild(l_o_brBtn);
		//ajout à la td du btn enregistrer
		l_o_td.appendChild(l_o_btnEnr);
		//ajout à la td du btn annuler
		l_o_td.appendChild(l_o_btnAnn);
		var l_o_form = document.getElementById('listeEchantillon');
		//modife action du form pour submit edition  
		l_o_form.setAttribute('action','index.php?action=echantillon&sousAction=editEch')
		l_o_form.setAttribute('enctype','multipart/form-data');
 
	}
	return false;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
if(document.all)//Pour IE
		{
			var l_o_inputMaxFileSize = document.createElement('<input name="MAX_FILE_SIZE" />');
		}
		else
		{
			var l_o_inputMaxFileSize = document.createElement('input');
			l_o_inputMaxFileSize.setAttribute('name','MAX_FILE_SIZE');
		}
		        l_o_inputMaxFileSize.setAttribute('type','hidden');
			l_o_inputMaxFileSize.setAttribute('value','250000');

et ainsi de suite. C'est l'attribut name que tu dois intégrer dans la création de l'élément mais pas toutes les attributs. Essaye de les modifier.

26/08/2009, 16h36
noxiox

C'est ce que j'avais fait au début mais cela ma donné le même résultat qu'actuellement.
26/08/2009, 19h03
kernelfailure
Citation:

Envoyé par andry.aime

[CODE]. . .
document.createElement('<input name="MAX_FILE_SIZE" />');
. . .

Aussi débile que ça puisse paraitre, une bonne solution qui passe sous IE7 est :

Code:

domElem.setAttribute('Name','DOMSousIECTropDeLaBalle');

C'est ridicule, mais le N majuscule de Name fait la différence... J'en pleure. :calim2:

Par contre :

Code:

document.createAttribute('Name')

renvoie null :mouarf:

En dehors de ça, en full text via un innerHTML, ça fonctionne mieux, sans monter des rustines pour IE ;)

EDIT :

J'ai été un peu vite du fait de problèmes de cache avec ce foutu IE dont je ne m'étais pas rendu compte immédiatement.
Certains de mes tests ne répondaient plus comme ils devaient.

J'en suis donc à la conclusion suivante pour que ça fonctionne :
Code:

1 2 3 domElm.setAttributeNode(document.createAttribute('Name')); domElm.setAttribute('name','IE&DOMFontBonMenage');
Et ça marche 8O

C'est donc bien le createAttribute('Name') qui force IE.

Toutes mes confuses :roll:
27/08/2009, 22h37
noxiox

Bonsoir,

Cela ne fonctionne pas non plus. Je viens de tester sous IE6.
Je ne sais vraiment pas d'où provient le problème.
28/08/2009, 16h01
noxiox
Youpi ! Héhé j'ai trouvé la solution ... (après 2 jours non stop dessus) :
Code:

1 2 l_o_form.setAttribute('enctype','multipart/form-data'); l_o_form.encoding ="multipart/form-data";
La deuxième ligne en complément pour IE ...

Merci à tous pour votre aide.