Passer enctype à un formulaire en DOM pour Internet Explorer
Le Document Object Model (ou DOM) est une recommandation du W3C qui décrit une interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d’accéder ou de mettre à jour le contenu, la structure ou le style de documents. Le document peut ensuite être traité et les résultats de ces traitements peuvent être réincorporés dans le document tel qu’il sera présenté. Source Wikipedia.
En résumé, cela permet de jouer sur les éléments HTML d’un page. Prenons un exemple, celui sur lequel on travaille actuellement. On a un formulaire d’ajout de produit dans une interface d’administration web. On a un champ “file” qui me permet d’attacher une image au produit.
Eh bien grâce au DOM et à Javascript, sur le clic du lien “Fichier supplémentaire”, on fait apparaitre les mêmes types de champs (on modifie l’arbre DOM) afin de pouvoir attacher un nombre illimité de fichiers, ceci sans rechargement de page puisque tout se passe “côté client”, c’est à dire sur le navigateur de l’internaute.
Après cette longue introduction, venons en au problème. Il n’y a pas beaucoup de sources à propos de ce bug sur internet, d’où la création de ce billet. Le problème se situe dans la création de formulaire grâce au DOM et sous Internet Explorer. Pour créer un formulaire le code peut être le suivant :
- // Création de l'objet formulaire
- var form = document.createElement('form');
- // Assignation des attributs
- form.setAttribute('id','form_1');
- form.setAttribute('action','page_action.php');
- form.setAttribute('method','post');
- // Création de l'objet fieldset
- fieldset = document.createElement('fieldset');
- // Ajoute le nœud fieldset au parent form
- form.appendChild(fieldset);
Maintenant si on veut transférer des fichiers via ce formulaire (upload grâce à input file), on doit créer un input de ce genre :
- // Création de l'élément input
- input_fichier = document.createElement('input');
- input_fichier .setAttribute('type','file');
- input_fichier.setAttribute('name','fichier[]');
Mais il faut aussi ajouter l’encodage du formulaire, spécifiant un échange de données :
- form.setAttribute('enctype','multipart/form-data');
Sous Firefox tout va bien, le problème vient d’un bug d’Internet Explorer (qui a dit encore ?) qui ignore tout simplement l’encodage attribué ci-avant.
La solution ?
Coupler à l’attribut enctype l’attribut encoding de la manière suivante :
- form.setAttribute('enctype','multipart/form-data');
- form.setAttribute('encoding','multipart/form-data');
Dorénavant IE et Firefox prendront en compte l’encodage du formulaire et vos fichiers seront correctement “postés” vers votre page de traitements.
octobre 11th, 2007 at 18:44
Merci Cyril pour ce petit tuyau qui je pense me sera fort utile d’ici un mois ou deux.
novembre 7th, 2007 at 11:32
Merci , j’ai vraiment cherché bcq cette astuce, merci encore
novembre 7th, 2007 at 11:47
Yep, super ça en était le but !
février 3rd, 2008 at 14:26
Heureusement que je suis tombé sur cette page, sinon j’allait m’arracher les cheveux
Merci por le tuyau
février 4th, 2008 at 13:37
De nada !
février 8th, 2008 at 10:29
Merci pour cette astuce, ce n’est pas grand chose mais il faut la connaître. Je suis en train de développer un prototype pour proposer des téléchargement exactement comme tu l’expliques et ca ne marchait pas sous ie
MERCI 1000 fois
avril 4th, 2008 at 13:31
Merci grandement pour l’astuce. Un de mes clients a besoin d’un admin “facile à comprendre”, et cette astuce va bien me servir.
J’ai remarqué un soucis du même type, je ne sais pas si tu as la solution, mais moi j’en ai une qui marche… pour ceux que ça intéresse : on ne peut pas non plus mettre d’événement par cette méthode sur IE.Les onclick etc ne marche pas.
Il faut alors, au lieu de mettre monobjet.setAttribute(’onclick’,fonction_click()); , préféré monobjet.onclick = fonction_client(); . Cela permet de contourner le problème, et on n’y pense pas toujours
Et encore merci pour le tuyau !
avril 11th, 2008 at 08:14
Oui la réponse est dans ton interrogation, onclick est un événement et non un attribut
Tu peux aussi avoir :
monObjet.onclick = function() {
return false;
}
septembre 2nd, 2008 at 21:22
Merci
dommage que je n’ai pas trouvé cette page avant
cela fait 2 semaines que je m’arrachais les cheveux
Encore un grand merci à ces abrutis de Microsoft
octobre 21st, 2008 at 16:35
thx
juin 11th, 2009 at 19:00
Merci beaucoup de l’astuce, ce ce que je cherchais…
juin 11th, 2009 at 21:41
Cool je vois que ça sert à des gens