Les éléments<input> dont l'attributtype vaut"file" permettent à un utilisateur de sélectionner un ou plusieurs fichiers depuis leur appareil et de lesuploader vers un serveur via [un formulaire](/fr/docs//Learn*web_development/Extensions/Forms) ou grâce à du code JavaScriptvia l'API _File*.

Exemple interactif

<label for="avatar">Choose a profile picture:</label><input type="file" name="avatar" accept="image/png, image/jpeg" />

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

Valeur

L'attributvalue contient une chaîne de caractères (DOMString) qui représente le chemin du/des fichier(s) sélectionné(s). Les autres fichiers peuvent être identifiés grâce à la propriétéHTMLInputElement.files.

Attributs supplémentaires

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

accept

Une chaîne de caractères qui définit les types de fichier qui devraient être acceptés. Cette chaîne est une liste d'identifiants de type de fichier (cf. ci-après) séparés par des virgules. Un fichier pouvant avoir un format selon différentes extensions et types MIME, il est souvent utile de cibler plusieurs identifiants pour la bonne sélection du fichier.

Les fichiers Microsoft Word, par exemple, peuvent être identifiés de différentes façons et, dans un site avec un champ qui accepte les fichiers Word, on pourra écrire :

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

capture

Une chaîne de caractères qui indique la caméra à utiliser pour capturer des photos et des vidéos si l'attributaccept indique que le fichier est de ce type. Lorsquecapture vaut"user", cela indique que la caméra qui fait face à l'utilisateur devrait être utilisée. Si l'attribut vaut"environment", c'est la caméra qui est tournée vers l'extérieur devrait être utilisée. Si l'attribut est absent, l'agent utilisateur pourra décider de laquelle utiliser. Si la caméra souhaitée par l'attribut n'est pas disponible, l'agent utilisateur pourra utiliser une autre caméra de l'appareil.

files

Un objetFileList qui liste chaque fichier sélectionné. Cette liste n'a qu'un seul élément, sauf simultiple est indiqué.

multiple

Lorsque cet attribut booléen est indiqué, le champ peut être utilisé afin de sélectionner plus d'un fichier.

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.

webkitdirectoryNon standard

L'attribut booléenwebkitdirectory, lorsqu'il est présent, indique que le contrôle permet de sélectionner un/des répertoires plutôt qu'un/des fichiers. VoirHTMLInputElement.webkitdirectory pour plus de détails et d'exemples.

Identifiants de type de fichier

Un identifiant de type de fichier est une chaîne de caractères qui décrit le type de fichier qui peut être sélectionné par un utilisateur via un élément<input> de typefile. Chaque identifiant peut prendre une des formes suivantes :

• Une extension de fichier valide, sensible à la casse et qui commence par un point (« . »). Par exemple :.jpg,.pdf ou.doc.
• Un type MIME valide, sans extension.
• La chaîne de caractèresaudio/* qui indique « n'importe quel fichier audio »
• La chaîne de caractèresvideo/* qui indique « n'importe quel fichier vidéo »
• La chaîne de caractèresimage/* qui indique « n'importe quel fichier image ».

L'attributaccept prend comme valeur une chaîne de caractères composée d'un ou plusieurs identifiants de type, séparés par des virgules. Ainsi, si un sélecteur de fichier doit permettre de sélectionner des images ou des documents PDF, on pourra écrire :

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

Utiliser<input type="file">

Un exemple simple

<form method="post" enctype="multipart/form-data">  <div>    <label for="file">Sélectionner le fichier à envoyer</label>    <input type="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, l'élément<input type="file"> fournit un bouton qui ouvre un sélecteur de fichier permettant de choisir un fichier.

Lorsque l'attributmultiple est utilisé (comme dans l'exemple précédent), cela signifie que plusieurs fichiers peuvent être sélectionnés de façon simultanée. L'utilisateur doit alors pouvoir choisir plusieurs fichiers depuis le sélecteur de fichier (par exemple en maintenant la toucheShift ouControl puis en cliquant). Si on souhaite qu'un seul fichier puisse être envoyé, il suffit de ne pas utiliser l'attributmultiple.

Lorsqu'on envoie le formulaire de l'exemple, le nom de chaque fichier sera ajouté aux paramètres de l'URL de la façon suivante :?file=fichier1.txt&file=fichier2.txt

Obtenir des informations sur les fichiers sélectionnés

Les fichiers sélectionnés peuvent être obtenus sous la forme d'un objetFileList renvoyé par la propriétéHTMLInputElement.files de l'élement du DOM. Cet objet est une liste d'objetsFile. Un objetFileList se comporte comme un tableau et on peut donc consulter sa longueur (la propriétélength) afin de connaître le nombre de fichiers sélectionnés.

Chaque objetFile contient les informations suivantes :

• name : le nom du fichier.
• lastModified : un nombre représentant la date à laquelle le fichier a été modifié pour la dernière fois (sous la forme d'un horodatage UNIX).
• lastModifiedDate : un objetDate qui représente la date et l'heure à laquelle le fichier a été modifié pour la dernière fois.
• size : un nombre qui représente la taille du fichier en octets.
• type : une chaîne de caractères (DOMString) qui représentele type MIME du fichier.
• webkitRelativePathNon standard : une chaîne de caractères qui indique l'emplacement relatif du fichier par rapport au dossier de base indiqué par l'attributwebkitdirectory.Attention, cette fonctionnalité est non-standard et doit être utilisée avec précaution.

Restreindre les types de fichiers acceptés

Il arrive souvent qu'on souhaite sélectionner certains types de fichiers. Par exemple, si on souhaite fournir une image de profil, on restreindra probablemnt les formats à ceux des formats d'image compatibles pour le Web commeJPEG ouPNG.

Pour cela, on peut utiliser l'attributaccept afin d'indiquer les formats de fichier acceptés (sous la forme d'une liste d'extensions de fichier ou de types MIME séparés par des virgules). Par exemple :

• accept="image/png" ouaccept=".png" permettra de n'accepter que les fichiers PNG.
• accept="image/png, image/jpeg" ouaccept=".png, .jpg, .jpeg" permettra de n'accepter que les fichiers PNG ou JPEG.
• accept="image/*" permettra d'accepter n'importe quel fichier dont le type MIME estimage/* (pour de nombreux appareils mobiles, cette valeur permet d'utiliser l'appareil photo de l'appareil afin de prendre une photo qui sera utilisée comme fichier à envoyer).
• accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" permettra d'accepter un fichier ressemblant à un document Word.

Prenons un exemple :

<form method="post" enctype="multipart/form-data">  <div>    <label for="profile_pic">Sélectionnez le fichier à utiliser</label>    <input      type="file"           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 à l'exemple précédent mais lorsque vous essayer de sélectionner un fichier, vous verrez que le sélecteur ne permet de sélectionner que les fichiers du/des type(s) indiqué(s) (il peut y avoir certaines différences selons les navigateurs et les systèmes d'exploitation).

L'attributaccept ne permet pas de valider/contrôler le type réel du/des fichier(s) sélectionné(s). Il fournit simplement une indication au navigateur pour aider l'utilisateur à sélectionner les bons fichiers. Toutefois, dans la plupart des cas, l'utilisateur peut toujours choisir une option dans le sélecteur afin de pouvoir choisir un fichier d'un autre type.

Dans tous les cas (et comme pour les autres éléments envoyés au serveur), il est nécessaire de contrôler les données reçues par un mécanisme de validation côté serveur.

Notes

1. À partir de Gecko 2.0, appeler la méthodeclick() sur un élément de typefile ouvre le sélecteur de fichier et permet à un utilisateur de sélectionner les fichiers sur son système d'opération. Pour plus d'exemples, voir Utiliser des fichiers avec des applications web.

2. 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";

3. 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'attributvalue pour des raisons de sécurité. À la place, on a le nom du fichier précédé du cheminC:\fakepath\. Cela provient de raisons historiques, est pris en charge par la plupart des navigateurs modernes. Cela a même étéinscrit dans la spécification.

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 à uploader (PNG, JPG)</label    >    <input      type="file"           name="image_uploads"      accept=".jpg, .jpeg, .png"      multiple />  </div>  <div>    <p>Aucun fichier sélectionné pour le moment</p>  </div>  <div>    <button>Envoyer</button>  </div></form>

html {  font-family: sans-serif;}form {  width: 600px;  background: #ccc;  margin: 0 auto;  padding: 20px;  border: 1px solid black;}form ol {  padding-left: 0;}form li,div > p {  background: #eee;  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 saura comment interagir avec le document pouruploader des fichiers.

var input = document.querySelector("input");var preview = document.querySelector(".preview");input.style.opacity = 0;

Ensuite, on ajouteun 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 fonctionupdateImageDisplay() que nous décrirons juste après.

input.addEventListener("change", updateImageDisplay);

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

• On lance une bouclewhile afin de vider le contenu qui pourrait être dans l'élément<div> servant à la prévisualisation.
• On récupère l'objetFileList qui contient les informations sur les fichiers sélectionnés et on le stocke dans une variable intituléecurFiles.
• On vérifie si aucun fichier n'a été sélectionné (ce qui se traduit par vérifier sicurFiles.length vaut 0). Si c'est le cas, on place un message dans le<div> de prévisualisation pour indiquer qu'aucun fichier n'a été sélectionné.
• Si des fichiers ont été sélectionnés, on les parcourt afin d'afficher des informations sur ces fichiers dans l'élément<div>. Quelques notes :
  • On utilise une fonctionvalidFileType() afin de vérifier si le fichier est bien du bon type (c'est-à-dire qu'il respecte les extensions d'image indiquées dans l'attributaccept).

    • Si c'est le cas :

      • On affiche le nom et la taille du fichier dans une liste à l'intérieur du<div> (obtenus à partir decurFiles[i].name etcurFiles[i].size). La fonctionreturnFileSize() est utilisée ici afin d'afficher la taille de façon lisible (en octets, kilo-octets ou mega-octets plutôt que toujours en octets).
      • On génère un aperçu de l'image en appelant la méthodewindow.URL.createObjectURL(curFiles[i]) et en réduisant l'image grâce à du CSS puis on insère cette image dans la liste.

    • Si le type de fichier est invalide, on affiche un message dans la liste afin d'indiquer à l'utilisateur qu'il est nécessaire de sélectionner un autre type de fichier.

function updateImageDisplay() {  while (preview.firstChild) {    preview.removeChild(preview.firstChild);  }  var curFiles = input.files;  if (curFiles.length === 0) {    var para = document.createElement("p");    para.textContent = "No files currently selected for upload";    preview.appendChild(para);  } else {    var list = document.createElement("ol");    preview.appendChild(list);    for (var i = 0; i < curFiles.length; i++) {      var listItem = document.createElement("li");      var para = document.createElement("p");      if (validFileType(curFiles[i])) {        para.textContent =          "File name " +          curFiles[i].name +          ", file size " +          returnFileSize(curFiles[i].size) +          ".";        var image = document.createElement("img");        image.src = window.URL.createObjectURL(curFiles[i]);        listItem.appendChild(image);        listItem.appendChild(para);      } else {        para.textContent =          "File name " +          curFiles[i].name +          ": Not a valid file type. Update your selection.";        listItem.appendChild(para);      }      list.appendChild(listItem);    }  }}

La fonctionvalidFileType() prend un objetFile en entrée puis parcourt la liste des types de fichier autorisés pour les comparer à la propriététype du fichier. Si on trouve une correspondance (ce qui signifie que le type est bien autorisé), la fonction renvoietrue, sinon, elle renvoiefalse.

var fileTypes = ["image/jpeg", "image/pjpeg", "image/png"];function validFileType(file) {  for (var i = 0; i < fileTypes.length; i++) {    if (file.type === fileTypes[i]) {      return true;    }  }  return false;}

La fonctionreturnFileSize() 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 < 1024) {    return number + " octets";  } else if (number >= 1024 && number < 1048576) {    return (number / 1024).toFixed(1) + " Ko";  } else if (number >= 1048576) {    return (number / 1048576).toFixed(1) + " Mo";  }}

Et voici le résultat :

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• Manipuler des fichiers à partir d'applications web contient différents exemples d'applications relatifs à<input type="file">
• L'APIFile.