Génération du site web de l'ULB - format xml
sommairesommaireindexindexpage précédentepage précédentepage suivantepage suivanteimprimerimprimerenvoyerenvoyermarquermarquer

<input type="file">: zone de sélection et d'envoi d'un ou plusieurs fichiers

Une zone de de sélection et d'envoi d'un ou plusieurs fichiers se définit à l'aide d'un élément <input type="file"> (ou <input type="fichier">).


Exemple de zone de sélection et d'envoi de fichiers

Votre document:

Code de cet exemple
<input type="file">
   <nom>file</nom>
   <libellé>votre document</libellé>
</input>

Contenu de l'élément <input type="file">

L'élément <input type="file"> (ou <input>) peut posséder les sous-éléments suivants (ils ne sont pas obligatoires):

<nom>

donne le nom du paramètre à envoyer avec les données du formulaire

<libellé>

donne le libellé à afficher dans le formulaire. Il sera visible par l'utilisateur, mais ne sera pas envoyé avec les données du formulaire

<p>

permet d'ajouter un commentaire en dessous de la zone de sélection et d'envoi de fichiers

<obligatoire/>

impose à l'utilisateur d'entrer une valeur dans la zone de sélection et d'envoi de fichiers

Ces sous-éléments peuvent être complétés par tous les éléments communs aux blocs, une question dans un formulaire étant considérée comme un bloc. Ceux-ci permettent de mettre en page la zone de sélection et d'envoi de fichier.

il n'est pas possible, pour des raisons de sécurité, de donner une valeur par défaut à une zone de sélection et d'envoi de fichiers


L'élément <input type="text"> peut posséder les attributs suivants (ils ne sont pas obligatoires):

envoyer="..."

précise s'il faut envoyer ou non un paramètre à l'application distante

multiple="oui"

indique si plusieurs fichiers peuvent être sélectionnés (par défaut, un seul fichier ne peut être sélectionné)

Ces attributs peuvent être complétés par tous les attributs communs aux blocs, une question dans un formulaire étant considérée comme un bloc. Ceux-ci permettent de mettre en page la zone de sélection et d'envoi de fichier.


Il est également possible d'utiliser les synonymes suivants:

<name>

synonyme de <nom>

<label>

synonyme de <libellé>

<title>

synonyme de <libellé>

<mandatory/>

synonyme de <obligatoire/>

Dans cet exemple, le titre "Sélectionner le fichier à envoyer:" sera affiché en regard d'une zone de saisie de texte. Un paramètre fichier sera envoyé à l'application distante lors de l'envoi du formulaire.

Remarque: comme le montre cet exemple, la première lettre du libellé est forcée en majuscule et un : lui est automatiquement ajouté.

Exemple
<input type="file">
   <nom>nom</nom>
   <libellé>entrez vos nom et prénom</libellé>
</input>

Sélectionner le fichier à envoyer:

Valeur par défaut

Pour des raisons de sécurité, il n'est pas possible de préselectionner un ou plusieurs fichiers par défaut en html (le ou les fichiers à envoyer doivent faire l'object d'une sélection explicite de l'utilisateur avant d'être envoyés).


Sélection multiple

Par défaut, un seul fichier pourra être sélectionné et envoyé. Vous pouvez changer cela en ajoutant l'attribut multiple="oui" dans l'élément <input type="file">.

Dans cet exemple, un seul fichier pourra être sélectionné.

Exemple
<formulaire>
   <test/>
   <input type="file">
      <nom>fichier</nom>
      <libellé>Sélectionner le fichier à envoyer</libellé>
   </input>
   <bouton>
      <label>envoyer</label>
   </bouton>
</formulaire>

Sélectionner le fichier à envoyer:

Dans cet autre exemple, plusieurs fichiers pourront être sélectionnés.

Si votre application est écrite en PHP, ce qui est le cas de cet exemple, il faut ajouter "[]" au nom du paramètre afin de récupérer la liste des fichiers envoyés sous la forme d'une Array (un tableau).

Exemple
<formulaire>
   <test/>
   <input type="file" multiple="oui">
      <nom>fichier[]</nom>
      <libellé>Sélectionner le fichier à envoyer</libellé>
   </input>
   <bouton>
      <label>envoyer</label>
   </bouton>
</formulaire>

Sélectionner le fichier à envoyer:

Méthode d'envoi des données

Il n'est pas possible d'utiliser la méthode GET pour envoyer un formulaire contenant une zone de sélection de fichier. Il faut obligatoirement utiliser la méthode POST (c'est une contrainte du langage HTML).

Normalement, les données envoyées en POST utilisent le format application/x-www-form-urlencoded (format du type nom=valeur), mais si un zone de sélection de fichier est présent les données utiliseront le format multipart/form-data.

Cela peut modifier la manière dont il faut décoder ces données dans l'application distante.

Si cette application est écrite en PHP, c'est assez facile. La plateforme PHP utilisera la variable _POST['xxx'] pour tous les champs sauf les zones de sélection de fichier. Pour celles-ci, c'est la variable _FILES['xxx'] qui sera utilisée (consultez la documentation de PHP pour plus d'informations).

Dans cet exemple, les paramètres seront accessibles via _POST['nom'], _POST['prenom'] et _FILES['fichier'].

Notez que cette dernière est également un tableau qui permet d'accéder aux informations sur le fichier reçu: _FILES['fichier']['name'], _FILES['fichier']['size']... (consultez la documentation de PHP pour plus d'informations).

Exemple
<formulaire>
   <test/>
   <input>
      <name>nom</name>
      <libellé>Votre nom</libellé>
      <valeur>Lampion</valeur>
   </input>
   <input>
      <name>prenom</name>
      <libellé>Votre prénom</libellé>
      <valeur>Séraphin</valeur>
   </input>
   <input type="file">
      <nom>fichier</nom>
      <libellé>Sélectionner le fichier à envoyer</libellé>
   </input>
   <bouton>
      <label>envoyer</label>
   </bouton>
</formulaire>

Votre nom:

Votre prénom:

Sélectionner le fichier à envoyer:

Rendre la sélection obligatoire

Si vous voulez rendre la sélection d'un (ou plusieurs) fichier(s) obligatoire, il suffit de placer un élément <obligatoire/> (ou <mandatory/>) au sein de l'élément <input type="file">.

Dans cet exemple, la sélection d'un fichier est obligatoire avant de pouvoir envoyer les données récoltées par le formulaire.

Exemple
<formulaire>
   <test/>
   <input type="file">
      <nom>fichier</nom>
      <libellé>Sélectionner le fichier à envoyer</libellé>
      <obligatoire/>
   </input>
   <bouton>
      <label>envoyer</label>
   </bouton>
</formulaire>

Sélectionner le fichier à envoyer:
sommairesommaireindexindexpage précédentepage précédentepage suivantepage suivante
ULB - entreprise écodynamique