Archive de octobre, 2007

Passer enctype à un formulaire en DOM pour Internet Explorer

11 octobre, 2007, Posté dans Développement web
8 Commentaires

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.

Formulaire DOM

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.

Formulaire DOM 2

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 :

  1. // Création de l'objet formulaire
  2. var form = document.createElement('form');
  3. // Assignation des attributs
  4. form.setAttribute('id','form_1');
  5. form.setAttribute('action','page_action.php');
  6. form.setAttribute('method','post');
  7. // Création de l'objet fieldset
  8. fieldset = document.createElement('fieldset');
  9. // Ajoute le nœud fieldset au parent form
  10. 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 :

  1. // Création de l'élément input
  2. input_fichier = document.createElement('input');
  3. input_fichier .setAttribute('type','file');
  4. input_fichier.setAttribute('name','fichier[]');

Mais il faut aussi ajouter l’encodage du formulaire, spécifiant un échange de données :

  1. 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 :

  1. form.setAttribute('enctype','multipart/form-data');
  2. 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.