Le fichier d'entrée "accepter" l'attribut est-il utile?
La mise en œuvre du chargement d'un fichier sous format html est assez simple, mais je viens de remarquer qu'il y a un "accepter" attribut qui peut être ajouté à la <input type="file" ...> tag.
Est cet attribut utile comme un moyen de limiter les uploads de fichier pour les images, etc? Quelle est la meilleure façon de l'utiliser?
Sinon, est-il un moyen de limiter les types de fichiers, de préférence dans la boîte de dialogue de fichier pour un fichier html balise d'entrée?
- Concernant la Li Huan réponse, le lien pour w3school est: w3schools.com/TAGS/att_input_accept.asp
- J'ai juste essayé d'utiliser "accepter=application/x-gzip" et il a travaillé avec google Chrome était 19.0.1084.52", mais ne fait rien en 'FF 13.0' et 'c'est à dire 8.0.6001'.
- Découvrez jsfiddle.net/jhfrench/cukjxnp6/embedded/result pour un moyen d'améliorer la
input type="file"pour valider que seulementaccepted types de fichiers peuvent être choisis.
Vous devez vous connecter pour publier un commentaire.
La
acceptattribut est incroyablement utile. C'est une astuce pour les navigateurs d'afficher uniquement les fichiers qui sont autorisés pour le courantinput. Alors qu'il peut généralement être remplacées par les utilisateurs, il permet de limiter les résultats pour les utilisateurs par défaut, de sorte qu'ils peuvent obtenir exactement ce qu'ils recherchent, sans avoir à parcourir une centaine de différents types de fichiers.Utilisation
Remarque: Ces exemples ont été écrits basés sur la spécification actuelle et peut ne pas fonctionner dans tous (ou toutes) les navigateurs. La spécification peut également changer à l'avenir, ce qui pourrait briser ces exemples.
CSS:
HTML:
À partir de la Spécification HTML (source)
accept='.jpg,.png,.gif,.pdf,.eps'ne permettent pas de sélection. J'ai essayé de nombreuses variantes - espace délimité, pas de point de caractères, etc., mais pas de dés en Chrome v20, donc j'ai fini par utiliser les types mime et il a très bien fonctionné:accept='image/jpeg,image/gif,image/png,application/pdf,image/x-eps'image/*. La poisse.*.*comme masque de fichier.Value: A set of comma-separated strings, each of which is a valid MIME type, with no parameters.Juste des types mime. Pas d'extensions. C'est au client de déterminer le type 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 aurez également besoin de spécifiervideo/mp4accept = "image/png|jpe?g|bmp"pour accepter à la fois les formats JPG et JPEG (il a tiré une erreur avecjpg|jpeg). Si ça peut aider quelqu'un...acceptattribut est extrêmement fiable de soutien - et, en fait, a été supprimé dans certaines versions récentes ainsi. Ne comptez pas sur elle pour votre application mobile de besoins (réf: caniuse.com/#search=accept)Oui, c'est extrêmement utile dans les navigateurs qui le supportent, mais la "limite" est comme une commodité pour les utilisateurs (de sorte qu'ils ne sont pas débordés avec pertinence les fichiers), plutôt que comme un moyen pour les empêcher de télécharger des choses que vous ne voulez pas les télécharger.
Il est pris en charge dans
Ici est une liste des types de contenu vous pouvez utiliser avec elle, suivie par le correspondant des extensions de fichier (même si bien sûr, vous pouvez utiliser n'importe quel fichier de l'extension):
accept=".ttf"fonctionne comme prévu.En 2015 la seule façon j'ai trouvé pour le faire fonctionner pour les deux Chrome et Firefox est de mettre toutes les extensions possibles à prendre en charge, y compris les variantes:
Problème avec FireFox: à l'Aide de la
image/jpegtype mime FireFox affichera uniquement les.jpgfichiers, très étrange, comme si la commune.jpegn'était pas ok...Quoi que vous fassiez, assurez-vous d'essayer avec des fichiers ayant beaucoup de différentes extensions.
Peut-être que ça dépend encore de l'OS ...
Je suppose que
acceptest insensible à la casse, mais peut-être pas dans tous les navigateurs.Ici est la MDN docs sur accepter:
Accepter attribut a été introduit dans le RFC 1867, dans l'intention d'activer le fichier de type filtrage basé sur le type MIME du fichier-sélectionnez contrôle. Mais à partir de 2008, la plupart, si pas tous, les navigateurs ne font pas usage de cet attribut. À l'aide de script côté client, vous pouvez faire une sorte d'extension en fonction de validation, pour soumettre des données de type (extension).
D'autres solutions pour l'avancée du téléchargement du fichier Flash besoin des films comme SWFUpload ou des Applets Java comme JUpload.
acceptattribut fait partie de la spec HTML5: whatwg.org/specs/web-apps/current-work/multipage/...Il est pris en charge par Chrome. Il n'est pas censé être utilisé pour la validation, mais pour le type hinting l'OS. Si vous avez un
accept="image/jpeg"attribut dans un upload de fichier de l'OS ne peut afficher que les fichiers du type.accept="image/*"fonctionne sur Firefox, Chrome et Opera.accept="text/plain"à la place.Il y a quelques années, et Chrome, tout au moins, l'utilisation de cet attribut. Cet attribut est très utile d'un point de vue de l'utilisabilité comme il va filtrer les fichiers inutiles pour l'utilisateur, ce qui rend leur expérience plus lisse. Toutefois, l'utilisateur peut toujours sélectionner "tous les fichiers" dans le type (ou de contourner le filtre), donc vous devez toujours valider le fichier où il est utilisé; Si vous l'utilisez sur le serveur, valider avant de l'utiliser. L'utilisateur peut toujours contourner un script côté client.
Si le navigateur utilise cet attribut, il est seulement comme une aide pour l'utilisateur, de sorte qu'il ne sera pas télécharger un multi-mo fichier il suffit de le voir rejeté par le serveur...
De même pour le
<input type="hidden" name="MAX_FILE_SIZE" value="100000">tag: si le navigateur utilise, il ne sera pas envoyer le fichier mais une erreur résultant dansUPLOAD_ERR_FORM_SIZE(2) erreur en PHP (je ne sais pas comment elle est traitée dans d'autres langues).Remarque: ce sont des aides pour la utilisateur. Bien sûr, le serveur doit toujours vérifier le type et la taille du fichier sur sa fin: il est facile de manipuler ces valeurs sur le côté client.
En 2008, ce n'était pas important en raison de l'absence de l'OS mobile es, mais maintenant tout à fait important.
Lorsque vous définissez des types mime acceptés, alors, par exemple, utilisateur d'Android est un système de dialogue avec les apps qui peut lui fournir le contenu de mime qui fichier d'entrée qui accepte, ce qui est génial parce que naviguer à travers les fichiers dans l'explorateur de fichiers sur les appareils mobiles est lente et souvent stressant.
Une chose importante est que certains navigateurs mobiles (basée sur la version Android de google Chrome 36 et Chrome Beta 37) ne prend pas en charge l'application de filtrage sur extension(s) et plusieurs types mime.