Téléchargement de fichiers

11.1 Élément <input type="file">

Les applications web demandent souvent aux utilisateurs de télécharger des fichiers sur le serveur. Cela peut être utile pour télécharger des documents, des images, des vidéos et d'autres types de données. HTML fournit l'élément <input type="file"> pour créer des interfaces de téléchargement de fichiers. Ci-dessous, nous examinerons en détail l'utilisation de cet élément et de ses attributs, tels que multiple et accept.

L'élément <input type="file"> crée un élément d'interface qui permet aux utilisateurs de sélectionner des fichiers à partir de leur appareil et de les télécharger sur le serveur. C'est l'un des éléments clés du formulaire en HTML, qui permet d'intégrer la fonctionnalité de téléchargement de fichiers dans les applications web.

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

1. type="file" — détermine que l'élément est conçu pour la sélection de fichiers.
2. name — définit le nom de l'élément, qui sera utilisé lors de l'envoi des données du formulaire au serveur.
3. multiple — permet à l'utilisateur de sélectionner plusieurs fichiers à la fois.
4. accept — spécifie les types de fichiers qui peuvent être sélectionnés en utilisant les types MIME ou les extensions de fichiers.

Exemples d'utilisation de l'élément <input type="file">

Un exemple simple

Un exemple très simple d'un élément de téléchargement de fichier sans attributs supplémentaires :

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="file">Choisissez un fichier :</label>
        <input type="file" id="file" name="file">
        <button type="submit">Télécharger</button>
      </form>
    
  

11.2 Attribut multiple

L'élément <input type="file"> prend en charge plusieurs attributs qui étendent sa fonctionnalité. Examinons-en deux : multiple et accept.

L'attribut multiple permet aux utilisateurs de sélectionner plusieurs fichiers à télécharger. Lorsqu'il est ajouté, les utilisateurs peuvent sélectionner plusieurs fichiers dans la boîte de dialogue de sélection de fichiers.

Exemple d'utilisation :

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="files">Choisissez des fichiers :</label>
        <input type="file" id="files" name="files" multiple>
        <button type="submit">Télécharger</button>
      </form>
    
  

11.3 Attribut accept

L'attribut accept limite les types de fichiers qui peuvent être sélectionnés par l'utilisateur. Cela est utile pour garantir que les utilisateurs téléchargent uniquement des types de fichiers autorisés (par exemple, uniquement des images ou des documents).

Exemple d'utilisation :

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="image">Choisissez une image :</label>
        <input type="file" id="image" name="image" accept="image/*">
        <button type="submit">Télécharger</button>
      </form>
    
  

L'attribut accept limite les types de fichiers qui peuvent être sélectionnés. Cela peut se faire par les types MIME ou les extensions de fichiers. Dans l'exemple ci-dessus, les utilisateurs peuvent sélectionner uniquement des fichiers d'images.

Exemples de valeurs de l'attribut accept

Limitation par type de fichier :

• accept="image/*" : tout type d'image
• accept="video/*" : tout type de fichier vidéo
• accept="audio/*" : tout type de fichier audio

Limitation par extension de fichier :

• accept=".jpg/.jpeg/.png" : uniquement des images au format JPEG et PNG
• accept=".pdf/.doc/.docx" : uniquement des documents PDF et Word

11.4 Traitement des fichiers côté client

Parfois, il est nécessaire d'effectuer un traitement préalable des fichiers côté client avant de les envoyer au serveur. Par exemple, vous pouvez afficher un aperçu des images ou vérifier la taille du fichier. Pour cela, on utilise JavaScript.

Exemple d'aperçu d'image :

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="image">Choisissez une image :</label>
        <input type="file" id="image" name="image" accept="image/*">
        <div id="preview"></div>
        <button type="submit">Télécharger</button>
      </form>
    
  

    
      document.getElementById('image').addEventListener('change', function(event) {
        const preview = document.getElementById('preview');
        preview.innerHTML = '';

        const files = event.target.files;

        for (let i = 0; i < files.length; i++) {
          const file = files[i];
          const reader = new FileReader();

          reader.onload = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            img.style.maxWidth = '200px';
            preview.appendChild(img);
          }
          reader.readAsDataURL(file);
        }
      });
    
  

Explication

• FileReader : utilisé pour lire le contenu des fichiers côté client
• reader.onload : événement déclenché lorsque le fichier est complètement lu
• reader.readAsDataURL(file) : méthode qui lit le fichier et l'encode en URL de données, permettant de l'afficher dans la balise <img>

1

Étude/Quiz

Éléments de formulaire, niveau 9, leçon 5

Indisponible

Éléments de formulaire

Éléments de formulaire

Ouvrir