<input type="file">

Exemple interactif

<label for="avatar">Choisir une photo de profil&nbsp;:</label>

<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

Valeur

L'attribut value d'un champ de type fichier contient une chaîne de caractères qui représente le chemin vers le ou les fichiers sélectionnés. Si aucun fichier n'est encore sélectionné, la valeur est une chaîne vide (""). Lorsque l'utilisateur·ice sélectionne plusieurs fichiers, le value représente le premier fichier dans la liste des fichiers qu'il·elle a sélectionnés. Les autres fichiers peuvent être identifiés à l'aide de la propriété HTMLInputElement.files du champ.

Attributs supplémentaires

En complément des attributs partagés par l'ensemble des éléments <input>, les champs de type file peuvent également utiliser les attributs suivants.

accept

L'attribut accept est une chaîne de caractères qui définit les types de fichiers que le champ de fichier doit accepter. Cette chaîne de caractères est une liste séparée par des virgules de identifiants de type de fichier uniques. Comme un type de fichier donné peut être identifié de plusieurs manières, il est utile de fournir un ensemble complet d'identifiants de type lorsque vous avez besoin de fichiers d'un format donné.

Par exemple, il existe plusieurs façons d'identifier les fichiers Microsoft Word, donc un site qui accepte les fichiers Word pourrait utiliser un <input> comme ceci :

<input
  type="file"
  id="docpicker"
  accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />

capture

L'attribut capture est une chaîne de caractères qui définit quelle caméra utiliser pour capturer des images ou des vidéos, si l'attribut accept indique que l'entrée doit être de l'un de ces types. Une valeur de user indique que la caméra et/ou le microphone orientés vers l'utilisateur·ice doivent être utilisés. Une valeur de environment définit que la caméra et/ou le microphone orientés vers l'extérieur doivent être utilisés. Si cet attribut est absent, l'agent utilisateur est libre de décider de son propre comportement. Si le mode de capture demandé n'est pas disponible, l'agent utilisateur peut revenir à son mode par défaut préféré.

multiple

Lorsque l'attribut booléen multiple est défini, le champ de fichier permet à l'utilisateur·ice de sélectionner plusieurs fichiers.

Attribut non-standard

En complément des attributs précédents, les éléments <input type="file"> peuvent utiliser les attributs spécifiques suivants. Ces attributs ne sont pas standard et ne devraient donc pas être utilisés.

webkitdirectory

L'attribut booléen webkitdirectory, lorsqu'il est présent, indique que seuls les répertoires doivent être disponibles pour être sélectionnés par l'utilisateur·ice dans l'interface de sélection de fichiers. Voir HTMLInputElement.webkitdirectory pour plus de détails et d'exemples.

Identifiants de type de fichier uniques

Un identifiant de type de fichier unique est une chaîne de caractères qui décrit un type de fichier pouvant être sélectionné par l'utilisateur·ice dans un élément <input> de type file. Chaque identifiant de type de fichier unique peut prendre l'une des formes suivantes :

• Une extension de fichier valide, insensible à la casse et commençant par un point (« . »). Par exemple : .jpg, .pdf ou .doc.
• Une chaîne de caractères de type MIME valide, sans extension.
• La chaîne de caractères audio/* qui signifie « n'importe quel fichier audio ».
• La chaîne de caractères video/* qui signifie « n'importe quel fichier vidéo ».
• La chaîne de caractères image/* qui signifie « n'importe quel fichier image ».

L'attribut accept prend comme valeur une chaîne de caractères contenant un ou plusieurs de ces identifiants de type de fichier uniques, séparés par des virgules. Par exemple, un sélecteur de fichiers qui doit permettre de sélectionner du contenu pouvant être présenté comme une image, incluant à la fois les formats d'image standards et les fichiers PDF, pourrait ressembler à ceci :

<input type="file" accept="image/*,.pdf" />

Utiliser les champs de fichier

Un exemple simple

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Sélectionner le fichier à envoyer</label>
    <input type="file" id="file" name="file" multiple />
  </div>
  <div>
    <button>Envoyer</button>
  </div>
</form>

div {
  margin-bottom: 10px;
}

Ce fragment de code HTML produira le résultat suivant :

Quel que soit l'appareil ou le système d'exploitation de l'utilisateur·ice, le champ de fichier fournit un bouton qui ouvre une boîte de dialogue permettant de choisir un fichier.

L'ajout de l'attribut multiple, comme montré ci-dessus, indique que plusieurs fichiers peuvent être sélectionnés en même temps. L'utilisateur·ice peut choisir plusieurs fichiers dans le sélecteur de fichiers de la manière permise par sa plateforme (par exemple en maintenant la touche Maj ou Ctrl puis en cliquant). Si vous souhaitez que l'utilisateur·ice ne puisse choisir qu'un seul fichier par <input>, il suffit de ne pas utiliser l'attribut multiple.

Obtenir des informations sur les fichiers sélectionnés

Les fichiers sélectionnés sont retournés par la propriété HTMLInputElement.files de l'élément, qui est un objet FileList contenant une liste d'objets File. L'objet FileList se comporte comme un tableau, vous pouvez donc vérifier sa propriété length pour obtenir le nombre de fichiers sélectionnés.

Chaque objet File contient les informations suivantes :

name

Le nom du fichier.

lastModified

Un entier définissant la date et l'heure auxquelles le fichier a été modifié pour la dernière fois, en millisecondes depuis l'époque UNIX (1er janvier 1970 à minuit).

lastModifiedDate Obsolète

Un objet Date représentant la date et l'heure auxquelles le fichier a été modifié pour la dernière fois. Cet attribut est obsolète et ne doit pas être utilisé. Préférez lastModified.

size

La taille du fichier en octets.

type

Le type MIME du fichier.

webkitRelativePath Non standard

Une chaîne de caractères définissant le chemin du fichier relatif au dossier de base sélectionné dans un sélecteur de répertoire (c'est-à-dire un sélecteur de fichier dans lequel l'attribut webkitdirectory est défini). Cet attribut est non-standard et doit être utilisé avec précaution.

Restreindre les types de fichiers acceptés

Souvent, vous ne souhaitez pas que l'utilisateur·ice puisse choisir n'importe quel type de fichier : vous voulez qu'il·elle sélectionne des fichiers d'un type ou de plusieurs types précis. Par exemple, si votre champ de fichier permet de téléverser une photo de profil, vous souhaitez probablement qu'il·elle sélectionne des formats d'image compatibles avec le web, tels que JPEG ou PNG.

Vous pouvez définir les types de fichiers acceptables avec l'attribut accept, qui prend une liste séparée par des virgules d'extensions de fichiers ou de types MIME autorisés. Quelques exemples :

• accept="image/png" ou accept=".png" — Accepte les fichiers PNG.
• accept="image/png, image/jpeg" ou accept=".png, .jpg, .jpeg" — Accepte les fichiers PNG ou JPEG.
• accept="image/*" — Accepte tout fichier avec un type MIME image/*. (De nombreux appareils mobiles permettent aussi à l'utilisateur·ice de prendre une photo avec la caméra lorsque cette option est utilisée.)
• accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — Accepte tout ce qui ressemble à un document MS Word.

Voyons un exemple plus complet :

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile_pic">Sélectionnez le fichier à utiliser</label>
    <input
      type="file"
      id="profile_pic"
      name="profile_pic"
      accept=".jpg, .jpeg, .png" />
  </div>
  <div>
    <button>Envoyer</button>
  </div>
</form>

div {
  margin-bottom: 10px;
}

Voici le résultat produit :

Le résultat peut sembler similaire, mais si vous essayez de sélectionner un fichier avec ce champ, vous verrez que le sélecteur ne permet de choisir que les types de fichiers définis dans la valeur de l'attribut accept (l'interface exacte varie selon les navigateurs et les systèmes d'exploitation).

L'attribut accept ne permet pas de valider les types des fichiers sélectionnés ; il fournit des indications aux navigateurs pour guider les utilisateurs vers la sélection des types de fichiers corrects. Il est toujours possible (dans la plupart des cas) pour les utilisateurs de basculer une option dans le sélecteur de fichiers qui permet de contourner cela et de sélectionner n'importe quel fichier qu'ils souhaitent, puis de choisir des types de fichiers incorrects.

À cause de cela, vous devez vous assurer que l'attribut accept est soutenu par une validation appropriée côté serveur.

Détecter les annulations

L'évènement cancel est déclenché lorsque l'utilisateur·ice ne modifie pas sa sélection, en re-sélectionnant les fichiers précédemment sélectionnés. L'évènement cancel est également déclenché lorsque la boîte de dialogue de sélection de fichiers est fermée ou annulée, grâce au bouton « Annuler » ou à la touche Échap.

Par exemple, le code suivant affichera un message dans la console si l'utilisateur·ice ferme la fenêtre sans sélectionner de fichier :

const elem = document.createElement("input");
elem.type = "file";
elem.addEventListener("cancel", () => {
  console.log("Annulé.");
});
elem.addEventListener("change", () => {
  if (elem.files.length === 1) {
    console.log("Fichier sélectionné : ", elem.files[0]);
  }
});
elem.click();

Notes

1. Il n'est pas possible de définir la valeur du sélecteur de fichier via un script. Le code suivant n'aura aucun effet :

   js

   const input = document.querySelector("input[type=file]");
   input.value = "toto";
   

2. Lorsqu'on choisit un fichier via <input type="file">, le chemin réel du fichier source n'est pas transmis dans la valeur de l'attribut value pour des raisons de sécurité. À la place, on a le nom du fichier précédé du chemin C:\fakepath\. Cela provient de raisons historiques, est pris en charge par la plupart des navigateurs modernes, et ça a même été défini dans la spécification ^(angl.).

Exemples

Dans l'exemple qui suit, on présente sélecteur de fichiers plus avancé, qui tire parti des informations disponibles grâce à la propriété HTMLInputElement.files. On montre aussi quelques astuces.

Tout d'abord, voici le fragment de code HTML utilisé :

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="image_uploads"
      >Sélectionner des images à téléverser (PNG, JPG)</label
    >
    <input
      type="file"
      id="image_uploads"
      name="image_uploads"
      accept=".jpg, .jpeg, .png"
      multiple />
  </div>
  <div class="preview">
    <p>Aucun fichier sélectionné pour le moment</p>
  </div>
  <div>
    <button>Envoyer</button>
  </div>
</form>

html {
  font-family: sans-serif;
}

form {
  background: #cccccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eeeeee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}

Pour l'instant, le fragment HTML ressemble à ce que nous avons déjà vu avant, rien de spécial.

Voyons maintenant le code JavaScript utilisé.

Pour les premières lignes du script, on récupère des références au formulaire et à l'élément <div> qui possède la classe .preview. Ensuite, on masque l'élément <input> car leur apparence peut être incohérente entre les navigateurs et qu'il est difficile de les mettre en forme. Cliquer sur l'élément <label> suffit à ouvrir le sélecteur et nous mettons donc en forme cet élément à la façon d'un bouton. Ainsi, l'utilisateur·ice saura comment interagir avec le document pour téléverser des fichiers.

const input = document.querySelector("input");
const preview = document.querySelector(".preview");

input.style.opacity = 0;

Ensuite, on ajoute un gestionnaire d'évènement à l'élément <input> afin de réaliser certaines actions lorsque sa valeur (c'est-à-dire les fichiers sélectionnés) change. Ici, le gestionnaire d'évènement appelle la fonction updateImageDisplay() que nous décrirons juste après.

input.addEventListener("change", updateImageDisplay);

À chaque fois que la fonction updateImageDisplay() est appelée :

• Utilisez une boucle while pour vider le contenu précédent de l'élément d'aperçu <div>.

• Récupérez l'objet FileList qui contient les informations sur tous les fichiers sélectionnés et stockez-le dans une variable appelée curFiles.

• Vérifiez qu'aucun fichier n'a été sélectionné en vérifiant si curFiles.length est égal à 0. Si c'est le cas, affichez un message dans l'aperçu <div> indiquant qu'aucun fichier n'a été sélectionné.

• Si des fichiers ont été sélectionnés, parcourez-les un par un et affichez les informations les concernant dans l'aperçu <div>. Remarques importantes :

• Nous utilisons la fonction personnalisée validFileType() pour vérifier si le fichier est du type correct (par exemple, les types d'images spécifiés dans l'attribut accept).

• Si c'est le cas, nous :

  • Affichons son nom et sa taille dans un élément de liste à l'intérieur de la balise <div> précédente (obtenus à partir de file.name et file.size). La fonction personnalisée returnFileSize() retourne une version bien formatée de la taille en octets/Ko/Mo (par défaut, le navigateur indique la taille en octets absolus).
  • Générons un aperçu miniature de l'image en appelant URL.createObjectURL(file). Ensuite, insérez l'image dans l'élément de liste en créant un nouveau <img> et en définissant son src sur la miniature.

• Si le type de fichier n'est pas valide, nous affichons un message dans un élément de liste indiquant à l'utilisateur·ice qu'il doit sélectionner un autre type de fichier.

function updateImageDisplay() {
  while (preview.firstChild) {
    preview.removeChild(preview.firstChild);
  }

  const curFiles = input.files;
  if (curFiles.length === 0) {
    const para = document.createElement("p");
    para.textContent =
      "Aucun fichier actuellement sélectionné pour le téléchargement";
    preview.appendChild(para);
  } else {
    const list = document.createElement("ol");
    preview.appendChild(list);

    for (const file of curFiles) {
      const listItem = document.createElement("li");
      const para = document.createElement("p");
      if (validFileType(file)) {
        para.textContent = `Nom du fichier ${file.name}, taille du fichier ${returnFileSize(
          file.size,
        )}.`;
        const image = document.createElement("img");
        image.src = URL.createObjectURL(file);
        image.alt = image.title = file.name;

        listItem.appendChild(image);
        listItem.appendChild(para);
      } else {
        para.textContent = `Nom du fichier ${file.name} : Type de fichier non valide. Mettez à jour votre sélection.`;
        listItem.appendChild(para);
      }

      list.appendChild(listItem);
    }
  }
}

La fonction personnalisée validFileType() prend un objet File en paramètre, puis utilise Array.prototype.includes() pour vérifier si une valeur dans fileTypes correspond à la propriété type du fichier. Si une correspondance est trouvée, la fonction renvoie true. Si aucune correspondance n'est trouvée, elle renvoie false.

// https://www.supremezsy.dpdns.org/fr/docs/Web/Media/Guides/Formats/Image_types
const fileTypes = [
  "image/apng",
  "image/bmp",
  "image/gif",
  "image/jpeg",
  "image/pjpeg",
  "image/png",
  "image/svg+xml",
  "image/tiff",
  "image/webp",
  "image/x-icon",
];

function validFileType(file) {
  return fileTypes.includes(file.type);
}

La fonction returnFileSize() prend en entrée un nombre d'octets (dans notre exemple, celui-ci provient de la propriété size du fichier) et le transforme en une chaîne de caractères plus compréhensible avec une taille en octets/Ko/Mo.

function returnFileSize(number) {
  if (number < 1e3) {
    return `${number} octets`;
  } else if (number >= 1e3 && number < 1e6) {
    return `${(number / 1e3).toFixed(1)} Ko`;
  }
  return `${(number / 1e6).toFixed(1)} Mo`;
}

const button = document.querySelector("form button");
button.addEventListener("click", (e) => {
  e.preventDefault();
  const para = document.createElement("p");
  para.append("Image téléversée !");
  preview.replaceChildren(para);
});

Et voici le résultat :

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• Utiliser des fichiers à partir d'applications web — contient différents exemples d'applications relatifs à <input type="file"> et l'API File.