Portail / Les sites Web / Le langage embarqué des navigateurs : JavaScript(Sommaire)

Le téléversement de fichiers : la sélection des fichiers.

Mise à jour du 19/11/2024.

Le téléversement (upload) est l'opération qui consiste à transmettre un ou plusieurs fichiers d'un programme client vers un programme serveur. C'est l'opération duale du téléchargement (download). Le téléchargement est une opératioin simple vue du client car la totalité de l'effort est supportée par le serveur. C'est exactement le contraire pour le téléversement. La difficulté est que le langage HTML est conçu pour présenter un texte balisé et il ne peut donc pas jouer un rôle dynamique. Si le client est un navigateur l'emploi d'un langage de script ou d'une extension spécifique est obligatoire.

En fait, le téléversement de fichiers depuis un navigateur nécessite 2 grandes étapes :

1. la sélection du ou des fichiers à téléverser ;
2. le transfert par le réseau des fichiers sélectionnés précédement.

Dans cette première partie, nous nous interressons à la sélection du ou des fichiers à téléverser. Cet article sert de démonstrateur. Vous pouvez donc accéder à son source HTML soit en inspectant la page, soit en faisant afficher son code source. Dans ce dernier cas vous devrez reformatter le code source pour le rendre lisible.

Sélection de fichiers par sélection manuelle.

HTML dispose d'un contrôle de sélection de fichier : <input type="file">. Ce contrôle de sélection de fichiers n'est pas très sexy et il est difficle de l'améliorer par CSS. Il existe diverses méthodes pour lui substituer un graphisme plus sympathique. Ici nous allons utiliser un principe de masquage à la fois simple est supportant de très nombreuses possibilités :

1. On créé le contrôle de sélection de fichiers en lui asociant un identifiant qui permettra de le retrouver mais on le cache à l'affichage ;
2. On crée un contrôle quelconque mais supportant l'évènement onclickqui se substitue au bouton ci-dessus ;
3. On écrit un gestionnaire associé à l'évènement onclick de ce dernier contrôle. Ce gestionnaire provoque l'envoi de l'évènement onclick du contôle de sélection de fichiers. Ainsi, lorsque l'on clique sur le contôle affiché, tout se passe comme si on avait cliqué sur le contrôle de sélection de fichier qui, lui, est caché.

Un autre avantage du masquage du contrôle de sélection de fichiers et qu'il est possible de lui associer un gestionnaire d'évènement onchange pour afficher le ou les fichiers sélectionnés. Nous présentons deux exemples ci-dessous. Le premier est un simble contrôle <label> que nous faisons passer pour un lien hypertexte, le second est une image SVG représentant un trombon rouge.

Liste des fichiers sélectionnés : Aucun

Sélection de fichiers par glisser-déposer.

Dans de nombreux cas, la sélection de fichiers par glisser déposer peut se révéler plus pratique. Nous allons le réaliser ici.