web-dev-qa-db-fra.com

Comment faire pour que <input type = "file" /> n'accepte que ces types?

Je veux que mon uploader n'autorise que ces types:

  • doc, docx.
  • xls, xlsx.
  • ppt, pptx.
  • sMS.
  • pdf.
  • Types d'image.

Comment puis-je atteindre cet objectif? Que dois-je mettre dans l'attribut accept? Merci de votre aide.

EDIT !!!

J'ai encore une chose à demander. Lorsque la fenêtre contextuelle apparaît pour vous permettre de choisir un fichier, une liste déroulante contient tous les fichiers autorisables dans le coin inférieur droit. Dans mon cas, la liste serait longue. Je vois dans la liste, il y a une option appelée All Supported Types. Comment puis-je le choisir par défaut et éliminer toutes les autres options?

Toute aide serait appréciée. Je vous remercie.

htmlhtml5file-uploadinput
57
Triet Doan

La valeur de accept attribut est, conformément à HTML5 LC, une liste d’éléments séparés par des virgules, dont chacun correspond à un type de support spécifique tel que image/gif, ou une notation comme image/* qui fait référence à tous les types image ou à une extension de nom de fichier comme .gif. IE 10+ et Chrome supporte tout cela, alors que Firefox ne supporte pas les extensions. Ainsi, le moyen le plus sûr est d'utiliser types de média et des notations comme image/*, dans ce cas

<input type="file" name="foo" accept=
"application/msword, application/vnd.ms-Excel, application/vnd.ms-PowerPoint,
text/plain, application/pdf, image/*">

si je comprends bien les intentions. Notez que les navigateurs peuvent ne pas reconnaître les noms de type de média exactement tels que spécifiés dans le registre faisant autorité. Des tests sont donc nécessaires.

100
Jukka K. Korpela

Utilisez comme ci-dessous

<input type="file" accept=".xlsx,.xls,image/*,.doc, .docx,.ppt, .pptx,.txt,.pdf" />
68
Ajith

Utiliser l'attribut accept avec le type MIME en tant que valeurs

<input type="file" accept="image/gif, image/jpeg" />
11
Chamika Sandamal

pour les fichiers PowerPoint et pdf:

<html>
<input type="file" placeholder="Do you have a .ppt?" name="pptfile" id="pptfile" accept="application/pdf,application/vnd.ms-PowerPoint,application/vnd.openxmlformats-officedocument.presentationml.slideshow,application/vnd.openxmlformats-officedocument.presentationml.presentation"/>
</html>
6
Amir Md Amiruzzaman

MISE À JOUR IMPORTANTE:

En raison de l'utilisation de seulement application/msword, application/vnd.ms-Excel, application/vnd.ms-PowerPoint ... n'autorise que les produits Microsoft 2003, et non les plus récents. J'ai trouvé ceci:

application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-PowerPoint, application/vnd.openxmlformats-officedocument.presentationml.slideshow, application/vnd.openxmlformats-officedocument.presentationml.presentation

Et cela inclut les nouveaux. Pour les autres fichiers, vous pouvez récupérer le type MIME dans votre fichier de cette manière (pardonnez la langue) (dans les types de liste MIME, il n'y en a pas):

enter image description here

Vous pouvez sélectionner et copier le type de contenu

5
Epistomai

Comme indiqué sur w3schools :

audio/* - Tous les fichiers son sont acceptés

video/* - Tous les fichiers vidéo sont acceptés

image/* - Tous les fichiers image sont acceptés

MIME_type - Un type MIME valide, sans paramètre. Recherchez les types IANA MIME pour obtenir une liste complète des types MIME standard.

4
Wilker Iceri

pour l'image écrire ceci

<input type=file accept="image/*">

Pour les autres, vous pouvez utiliser l'attribut accept de votre formulaire pour suggérer au navigateur de restreindre certains types. Cependant, vous voudrez valider à nouveau votre code côté serveur pour vous en assurer. Ne faites jamais confiance à ce que le client vous envoie

1
Sagar Vaghela