La mise en œuvre d'un téléchargement de fichier sous html est assez simple, mais je viens de remarquer qu'il existe un attribut «accepter» qui peut être ajouté à la <input type="file" ...>balise.

Cet attribut est-il utile pour limiter les téléchargements de fichiers vers des images, etc.? Quelle est la meilleure façon de l'utiliser?

Sinon, existe-t-il un moyen de limiter les types de fichiers, de préférence dans la boîte de dialogue de fichier, pour une balise d'entrée de fichier html?

L' acceptattribut est incroyablement utile. C'est un indice pour les navigateurs de n'afficher que les fichiers autorisés pour le courant input. Bien qu'il puisse généralement être remplacé par les utilisateurs, il aide à affiner les résultats pour les utilisateurs par défaut, afin qu'ils puissent obtenir exactement ce qu'ils recherchent sans avoir à parcourir une centaine de types de fichiers différents.

Usage

Remarque: Ces exemples ont été écrits sur la base de la spécification actuelle et peuvent ne pas fonctionner réellement dans tous les navigateurs (ou tous). La spécification pourrait également changer à l'avenir, ce qui pourrait casser ces exemples.

h1 { font-size: 1em; margin:1em 0; }
h1 ~ h1 { border-top: 1px solid #ccc; padding-top: 1em; }

<h1>Match all image files (image/*)</h1>
<p><label>image/* <input type="file" accept="image/*"></label></p>

<h1>Match all video files (video/*)</h1>
<p><label>video/* <input type="file" accept="video/*"></label></p>

<h1>Match all audio files (audio/*)</h1>
<p><label>audio/* <input type="file" accept="audio/*"></label></p>

<h1>Match all image files (image/*) and files with the extension ".someext"</h1>
<p><label>.someext,image/* <input type="file" accept=".someext,image/*"></label></p>

<h1>Match all image files (image/*) and video files (video/*)</h1>
<p><label>image/*,video/* <input type="file" accept="image/*,video/*"></label></p>

De la spécification HTML ( source )

L' acceptattribut peut être spécifié pour fournir aux agents utilisateurs une indication des types de fichiers qui seront acceptés.

S'il est spécifié, l'attribut doit être constitué d'un ensemble de jetons séparés par des virgules , dont chacun doit être une correspondance ASCII insensible à la casse pour l'un des éléments suivants:

La chaîne audio/*

• Indique que les fichiers audio sont acceptés.

La chaîne video/*

• Indique que les fichiers vidéo sont acceptés.

La chaîne image/*

• Indique que les fichiers image sont acceptés.

Un type MIME valide sans paramètres

• Indique que les fichiers du type spécifié sont acceptés.

Une chaîne dont le premier caractère est un caractère U + 002E FULL STOP (.)

• Indique que les fichiers avec l'extension de fichier spécifiée sont acceptés.

Oui, il est extrêmement utile dans les navigateurs qui le prennent en charge, mais la "limitation" est une commodité pour les utilisateurs (afin qu'ils ne soient pas submergés de fichiers non pertinents) plutôt que comme un moyen de les empêcher de télécharger des choses que vous ne voulez pas Téléchargement.

Il est pris en charge dans

• Chrome 16 +
• Safari 6 +
• Firefox 9 +
• IE 10 +
• Opera 11 +

Voici une liste des types de contenu que vous pouvez utiliser avec, suivie des extensions de fichier correspondantes (bien que vous puissiez bien sûr utiliser n'importe quelle extension de fichier):

application/envoy   evy
application/fractals    fif
application/futuresplash    spl
application/hta hta
application/internet-property-stream    acx
application/mac-binhex40    hqx
application/msword  doc
application/msword  dot
application/octet-stream    *
application/octet-stream    bin
application/octet-stream    class
application/octet-stream    dms
application/octet-stream    exe
application/octet-stream    lha
application/octet-stream    lzh
application/oda oda
application/olescript   axs
application/pdf pdf
application/pics-rules  prf
application/pkcs10  p10
application/pkix-crl    crl
application/postscript  ai
application/postscript  eps
application/postscript  ps
application/rtf rtf
application/set-payment-initiation  setpay
application/set-registration-initiation setreg
application/vnd.ms-excel    xla
application/vnd.ms-excel    xlc
application/vnd.ms-excel    xlm
application/vnd.ms-excel    xls
application/vnd.ms-excel    xlt
application/vnd.ms-excel    xlw
application/vnd.ms-outlook  msg
application/vnd.ms-pkicertstore sst
application/vnd.ms-pkiseccat    cat
application/vnd.ms-pkistl   stl
application/vnd.ms-powerpoint   pot
application/vnd.ms-powerpoint   pps
application/vnd.ms-powerpoint   ppt
application/vnd.ms-project  mpp
application/vnd.ms-works    wcm
application/vnd.ms-works    wdb
application/vnd.ms-works    wks
application/vnd.ms-works    wps
application/winhlp  hlp
application/x-bcpio bcpio
application/x-cdf   cdf
application/x-compress  z
application/x-compressed    tgz
application/x-cpio  cpio
application/x-csh   csh
application/x-director  dcr
application/x-director  dir
application/x-director  dxr
application/x-dvi   dvi
application/x-gtar  gtar
application/x-gzip  gz
application/x-hdf   hdf
application/x-internet-signup   ins
application/x-internet-signup   isp
application/x-iphone    iii
application/x-javascript    js
application/x-latex latex
application/x-msaccess  mdb
application/x-mscardfile    crd
application/x-msclip    clp
application/x-msdownload    dll
application/x-msmediaview   m13
application/x-msmediaview   m14
application/x-msmediaview   mvb
application/x-msmetafile    wmf
application/x-msmoney   mny
application/x-mspublisher   pub
application/x-msschedule    scd
application/x-msterminal    trm
application/x-mswrite   wri
application/x-netcdf    cdf
application/x-netcdf    nc
application/x-perfmon   pma
application/x-perfmon   pmc
application/x-perfmon   pml
application/x-perfmon   pmr
application/x-perfmon   pmw
application/x-pkcs12    p12
application/x-pkcs12    pfx
application/x-pkcs7-certificates    p7b
application/x-pkcs7-certificates    spc
application/x-pkcs7-certreqresp p7r
application/x-pkcs7-mime    p7c
application/x-pkcs7-mime    p7m
application/x-pkcs7-signature   p7s
application/x-sh    sh
application/x-shar  shar
application/x-shockwave-flash   swf
application/x-stuffit   sit
application/x-sv4cpio   sv4cpio
application/x-sv4crc    sv4crc
application/x-tar   tar
application/x-tcl   tcl
application/x-tex   tex
application/x-texinfo   texi
application/x-texinfo   texinfo
application/x-troff roff
application/x-troff t
application/x-troff tr
application/x-troff-man man
application/x-troff-me  me
application/x-troff-ms  ms
application/x-ustar ustar
application/x-wais-source   src
application/x-x509-ca-cert  cer
application/x-x509-ca-cert  crt
application/x-x509-ca-cert  der
application/ynd.ms-pkipko   pko
application/zip zip
audio/basic au
audio/basic snd
audio/mid   mid
audio/mid   rmi
audio/mpeg  mp3
audio/x-aiff    aif
audio/x-aiff    aifc
audio/x-aiff    aiff
audio/x-mpegurl m3u
audio/x-pn-realaudio    ra
audio/x-pn-realaudio    ram
audio/x-wav wav
image/bmp   bmp
image/cis-cod   cod
image/gif   gif
image/ief   ief
image/jpeg  jpe
image/jpeg  jpeg
image/jpeg  jpg
image/pipeg jfif
image/svg+xml   svg
image/tiff  tif
image/tiff  tiff
image/x-cmu-raster  ras
image/x-cmx cmx
image/x-icon    ico
image/x-portable-anymap pnm
image/x-portable-bitmap pbm
image/x-portable-graymap    pgm
image/x-portable-pixmap ppm
image/x-rgb rgb
image/x-xbitmap xbm
image/x-xpixmap xpm
image/x-xwindowdump xwd
message/rfc822  mht
message/rfc822  mhtml
message/rfc822  nws
text/css    css
text/h323   323
text/html   htm
text/html   html
text/html   stm
text/iuls   uls
text/plain  bas
text/plain  c
text/plain  h
text/plain  txt
text/richtext   rtx
text/scriptlet  sct
text/tab-separated-values   tsv
text/webviewhtml    htt
text/x-component    htc
text/x-setext   etx
text/x-vcard    vcf
video/mpeg  mp2
video/mpeg  mpa
video/mpeg  mpe
video/mpeg  mpeg
video/mpeg  mpg
video/mpeg  mpv2
video/quicktime mov
video/quicktime qt
video/x-la-asf  lsf
video/x-la-asf  lsx
video/x-ms-asf  asf
video/x-ms-asf  asr
video/x-ms-asf  asx
video/x-msvideo avi
video/x-sgi-movie   movie
x-world/x-vrml  flr
x-world/x-vrml  vrml
x-world/x-vrml  wrl
x-world/x-vrml  wrz
x-world/x-vrml  xaf
x-world/x-vrml  xof

En 2015, le seul moyen que j'ai trouvé pour le faire fonctionner pour Chrome et Firefox est de mettre toutes les extensions possibles que vous souhaitez prendre en charge, y compris les variantes:

accept=".jpeg, .jpg, .jpe, .jfif, .jif"

Problème avec Firefox : L'utilisation du image/jpegtype mime Firefox n'affichera que les .jpgfichiers, très étrange comme si le commun .jpegn'était pas correct ...

Quoi que vous fassiez, assurez-vous d'essayer avec des fichiers ayant de nombreuses extensions différentes. Peut-être que cela dépend même du système d'exploitation ... Je suppose que la acceptcasse est insensible, mais peut-être pas dans tous les navigateurs.

Voici les documents MDN sur accepter :

accept Si la valeur de l'attribut type est file, cet attribut indiquera les types de fichiers que le serveur accepte, sinon il sera ignoré. La valeur doit être une liste séparée par des virgules de spécificateurs de type de contenu uniques:

    A file extension starting with the STOP character (U+002E). (e.g. .jpg, .png, .doc).
    A valid MIME type with no extensions.
    audio/* representing sound files. HTML5
    video/* representing video files. HTML5
    image/* representing image files. HTML5

L'attribut Accept a été introduit dans la RFC 1867 , dans l'intention de permettre le filtrage de type de fichier basé sur le type MIME pour le contrôle de sélection de fichier. Mais depuis 2008, la plupart, sinon la totalité, des navigateurs n'utilisent pas cet attribut. À l'aide de scripts côté client, vous pouvez effectuer une sorte de validation basée sur l'extension, pour soumettre des données de type correct (extension).

D'autres solutions pour le téléchargement avancé de fichiers nécessitent des films Flash comme SWFUpload ou des applets Java comme JUpload .

Il est pris en charge par Chrome. Il n'est pas censé être utilisé pour la validation, mais pour indiquer le type du système d'exploitation. Si vous avez un accept="image/jpeg"attribut dans un téléchargement de fichier, le système d'exploitation ne peut afficher que les fichiers du type suggéré.

Cela fait quelques années, et Chrome utilise au moins cet attribut. Cet attribut est très utile du point de vue de la convivialité car il filtrera les fichiers inutiles pour l'utilisateur, ce qui rendra leur expérience plus fluide. Cependant, l'utilisateur peut toujours sélectionner "tous les fichiers" dans le type (ou autrement contourner le filtre), vous devez donc toujours valider le fichier où il est réellement utilisé; Si vous l'utilisez sur le serveur, validez-le avant de l'utiliser. L'utilisateur peut toujours contourner tout script côté client.

Si le navigateur utilise cet attribut, c'est uniquement pour aider l'utilisateur, il ne téléchargera donc pas un fichier de plusieurs mégaoctets juste pour le voir rejeté par le serveur ...
Idem pour le <input type="hidden" name="MAX_FILE_SIZE" value="100000">tag: si le navigateur l'utilise, il n'enverra pas le fichier mais une erreur entraînant UPLOAD_ERR_FORM_SIZE(2) une erreur en PHP (je ne sais pas comment il est géré dans d'autres langues).
Notez que ce sont des aides pour l' utilisateur . Bien sûr, le serveur doit toujours vérifier le type et la taille du fichier de son côté: il est facile de falsifier ces valeurs côté client.

En 2008, ce n'était pas important en raison du manque de systèmes d'exploitation mobiles, mais maintenant chose très importante.

Lorsque vous définissez des types de mime acceptés, alors, par exemple, l'utilisateur Android reçoit une boîte de dialogue système avec des applications qui peuvent lui fournir le contenu du mime que l'entrée de fichier accepte, ce qui est génial car la navigation dans les fichiers dans l'explorateur de fichiers sur les appareils mobiles est lente et souvent stressante. .

Une chose importante est que certains navigateurs mobiles (basés sur la version Android de Chrome 36 et Chrome Beta 37) ne prennent pas en charge le filtrage des applications sur les extensions et les types de mime multiples.