DOM Compatible IE [Résolu]

[MichaelVDH]

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 . Auriez-vous quelques conseils pour rendre compatible ma fonction sous IE

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

[NoSmoking]

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

[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

[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...

[MichaelVDH]

Rha merci Micro$oft

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 html :

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

[Bovino]

Essaye de changer

Code :

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

par

Code :

input.onchange = function(){uploadPhoto(id)};

[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

[RomainVALERI]

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)

[MichaelVDH]

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

[Bovino]

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

Code :

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

pour IE

[NoSmoking]

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.

[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

[ABCIWEB]

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

[Bovino]

Code :

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

[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...

[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

[MichaelVDH]

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

[RomainVALERI]

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 ^^

[Bovino]

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

Certainemment pas

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.

[MichaelVDH]

Bon ca va ca va j'ai rien dit

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 , c'est vraiment cool, j'espère pouvoir un peu aider sur le forum avec mes maigres connaissances.