Attribut HTML : accept

Lorsque cet attribut est utilisé sur un champ permettant de sélectionner un fichier, le sélecteur de fichier natif qui s'ouvre devrait filtrer sur les seuls fichiers qui correspondent au(x) type(s) indiqués. La plupart des systèmes d'exploitation masquent ou grisent alors les fichiers qui ne correspondent pas et ne peuvent pas être sélectionnés.

<p>
  <label for="soundFile">Sélectionnez un fichier audio :</label>
  <input type="file" id="soundFile" accept="audio/*" />
</p>
<p>
  <label for="videoFile">Sélectionnez un fichier vidéo :</label>
  <input type="file" id="videoFile" accept="video/*" />
</p>
<p>
  <label for="imageFile">Sélectionner des images :</label>
  <input type="file" id="imageFile" accept="image/*" multiple />
</p>

Notez que le dernier exemple vous permet de sélectionner plusieurs images. Voir l'attribut multiple pour plus d'informations.

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

• Une extension de nom de fichier valide et insensible à la casse, commençant par un caractère point (« . »). Par exemple : .jpg, .pdf, ou .doc.
• Une chaîne de type MIME valide, sans extension.
• La chaîne de caractères audio/* signifiant "tout fichier audio".
• La chaîne de caractères vidéo/* signifiant "tout fichier vidéo".
• La chaîne de caractères image/* signifiant "tout fichier image".

L'attribut accept prend comme valeur une chaîne de caractères contenant une ou plusieurs de ces spécificateurs de type de fichier unique, séparées par des virgules. Par exemple, un sélecteur de fichiers qui a besoin d'un contenu pouvant être présenté comme une image, y compris les formats d'image standard et les fichiers PDF, pourrait ressembler à ceci :

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

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choisissez le fichier à téléverser</label>
    <input type="file" id="file" name="file" multiple />
  </div>
  <div>
    <button>Soumettre</button>
  </div>
</form>

div {
  margin-bottom: 10px;
}

Cela produit le résultat suivant :

Quel que soit le dispositif ou le système d'exploitation de l'utilisateur, l'entrée de fichier fournit un bouton qui ouvre une boîte de dialogue de sélection de fichier permettant à l'utilisateur de choisir un fichier.

L'inclusion de l'attribut multiple, comme indiqué ci-dessus, spécifie que plusieurs fichiers peuvent être choisis en même temps. L'utilisateur peut choisir plusieurs fichiers dans le sélecteur de fichiers de n'importe quelle manière permise par la plateforme qu'il a choisie (par exemple, en maintenant la touche Maj ou Ctrl, puis en cliquant). Si vous souhaitez que l'utilisateur ne choisisse qu'un seul fichier par <input>, omettez l'attribut multiple.

Souvent, vous ne voudrez pas que l'utilisateur puisse choisir n'importe quel type de fichier arbitraire ; au contraire, vous voudrez souvent qu'il sélectionne des fichiers d'un ou plusieurs types spécifiques. Par exemple, si votre entrée de fichier permet aux utilisateurs de télécharger une photo de profil, vous voulez probablement qu'ils sélectionnent des formats d'image compatibles avec le Web, tels que JPEG ou PNG.

Les types de fichiers acceptables peuvent être spécifiés avec l'attribut accept, qui prend une liste d'extensions de fichiers ou de types MIME autorisés séparés par des virgules. Quelques exemples :

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

Examinons un exemple plus complet :

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile_pic">Choisissez le fichier à téléverser</label>
    <input
      type="file"
      id="profile_pic"
      name="profile_pic"
      accept=".jpg, .jpeg, .png" />
  </div>
  <div>
    <button>Soumettre</button>
  </div>
</form>

div {
  margin-bottom: 10px;
}

• Utiliser des fichiers à partir d'applications web
• L'API File