Format de fichier limite lors de l’utilisation<input type="file">?

Question

Je voudrais limiter le type de fichier que vous pouvez choisir du sélecteur de fichier de système d’exploitation natif lorsque l’utilisateur clique sur le bouton Parcourir dans le `` élément en HTML. J’ai le sentiment que c’est impossible, mais je voudrais savoir si il est une solution. Je tiens à garder uniquement en HTML et de JavaScript ; pas de Flash s’il vous plaît.

Answer 1

Strictement parlant, la réponse est non. Le développeur ne peut pas empêcher l'utilisateur de choisir les fichiers de tout type ou d'extension dans le système d'exploitation natif de fichier boîte de dialogue de sélection.

Mais encore, l' acecpt attribut de l' <input type = "file"> peuvent aider à fournir un filtre dans le fichier de la boîte de dialogue de sélection de l'OS. Par exemple,

<!-- (IE 10+, Chrome) -->
<input type="file" accept=".xls,.xlsx">

devrait fournir un moyen de filtrer les fichiers autres que .xls ou .xlsx. Bien que le MDN page pour attribut d'entrée dit qu'il prend en charge ce, à ma grande surprise, cela n'a pas fonctionné pour moi dans Firefox Nightly 34 (28 août 2014). Cela fonctionne dans IE 10+ et google Chrome.

Donc, pour soutenir Firefox (avec IE 10+ et Chrome), je suppose qu'il est préférable d'utiliser des liste séparée par des virgules de MIME-types:

<!-- (IE 10+, Chrome, Firefox) -->
<input type="file"
 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

Voir la DÉMO.

Référence: Liste des types MIME

IMPORTANT: accepter l'Aide de l'attribut fournit seulement un moyen de filtrer les fichiers de types qui ne sont pas d'intérêt. Navigateurs permettent aux utilisateurs de choisir les fichiers de tout type. Supplémentaire (côté client) vérifie doit être fait (à l'aide de JavaScript, on pourrait être cela), et certainement les types de fichiers DOIT être vérifié sur le serveur, en utilisant une combinaison de MIME-type en utilisant à la fois l'extension du fichier et son binaire signature (ASP.NET, PHP, Ruby, Java). Vous pouvez également vous reporter à ces tables pour les types de fichiers et leurs numéros de magie, d'effectuer un serveur robuste côté de vérification.

Voici trois bonnes lectures sur le dossier téléchargements et de la sécurité.

EDIT: Peut être un type de fichier de vérification à l'aide de sa signature binaire peut aussi être fait sur le côté client à l'aide de JavaScript (plutôt que de simplement en regardant l'extension) à l'aide de HTML5 Fichier API, mais encore, le fichier doit être vérifié sur le serveur, car un utilisateur malveillant seront toujours en mesure de télécharger des fichiers par de faire un custom de la requête HTTP.

Answer 2

Il y a les accepter attribut de la balise input. Cependant, il n'est pas fiable en aucune façon. Les navigateurs les plus susceptibles de le traiter comme une "suggestion", ce qui signifie que l'utilisateur peut, selon le gestionnaire de fichiers, ainsi, avoir une pré-sélection qui n'affiche que l'souhaité types. Il est possible de choisir "tous les fichiers" et télécharger n'importe quel fichier qu'ils veulent.

exemple:

<form>
  <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>

lire la suite dans la spec html5

Gardez à l'esprit que c'est uniquement pour être utilisé comme une "aide" pour l'utilisateur de trouver les bons champs. chaque utilisateur peut envoyer toute demande qu'il/elle veut à votre serveur. vous devez toujours avoir validé tout serverside.

Donc la réponse est: aucun de vous ne peut pas restreindre, mais vous pouvez définir une pré-sélection, mais vous ne peut pas compter sur elle.

Alternativement, ou en outre vous pouvez faire quelque chose de similaire en vérifiant le nom du fichier (valeur du champ de saisie) avec JavaScript, mais c'est un non-sens car il n'offre aucune protection et ne pas non plus facilité la sélection de l'utilisateur. Seulement potentiellement astuces webmaster en pensant qu'il/elle est protégée et s'ouvre un trou de sécurité. Il peut être une douleur dans le cul pour les utilisateurs qui n'ont pas d'autres extensions de fichiers (par exemple jpeg au lieu de jpg), en majuscules, ou aucune des extensions de fichier que ce soit (comme c'est souvent sur les systèmes linux).

Answer 3

Vous pouvez utiliser le événement à surveiller ce que l’utilisateur sélectionne et signalez-lui à ce moment-là que le fichier n’est pas acceptable. Elle ne limite pas la liste réelle des fichiers affichés, mais c’est le plus proche, vous pouvez faire côté client, sans compter que le mal prise en charge attribut.

exemple à http://www.jsfiddle.net/gaby/7br93/1/

Answer 4

Oui, vous avez raison. Il est impossible avec le HTML. L’utilisateur sera en mesure de choisir tout autre fichier qu’il veut.

Vous pouvez écrire un morceau de code JavaScript pour éviter de se soumettre à un fichier basé sur son extension. Mais n’oubliez pas que cela empêchera en aucun cas un utilisateur malveillant pour soumettre n’importe quel fichier qu'il/elle veut vraiment.

Quelque chose comme :

Code HTML :

Answer 5

Techniquement, vous pouvez spécifier le `` attribut (alternative en html5) sur le `` élément, mais il n’est pas correctement pris en charge.