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?
html
filter
cross-browser
mime-types
Darren Oster
la source
la source
input type="file"afin de valider que seulsacceptles types de fichiers ed peuvent être choisis.Réponses:
L'
acceptattribut est incroyablement utile. C'est un indice pour les navigateurs de n'afficher que les fichiers autorisés pour le courantinput. 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.
De la spécification HTML ( source )
la source
accept='.jpg,.png,.gif,.pdf,.eps'n'ai autorisé aucune sélection. J'ai essayé de nombreuses variantes - délimitées par des espaces, pas de points, etc., mais pas de dés dans Chrome v20, j'ai donc fini par utiliser les types MIME et cela a très bien fonctionné:accept='image/jpeg,image/gif,image/png,application/pdf,image/x-eps'image/*. Bummer.Value: A set of comma-separated strings, each of which is a valid MIME type, with no parameters.uniquement les types MIME. Pas d'extensions. C'est au client de déterminer le type de mime.A string whose first character is a U+002E FULL STOP character (.) -- Indicates that files with the specified file extension are accepted.video/*signifie que vous ne pouvez pas télécharger mp4 dans Safari, vous devrez également spécifiervideo/mp4Oui, 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
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):
la source
accept=".ttf"fonctionne donc comme prévu.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:
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 :
la source
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 .
la source
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é.la source
accept="image/*"fonctionne sur Firefox, Chrome et Opera.accept="text/plain"plutôt.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.
la source
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înantUPLOAD_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.
la source
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.
la source