web-dev-qa-db-fra.com

Comment faire en sorte qu'une entrée de fichier html5 n'accepte que certains types de fichiers de manière cohérente sur tous les navigateurs?

Selon cette réponse sur Stack Overflow }, nous pouvons définir l'attribut accept d'un <input type="file" /> pour filtrer les entrées acceptées, comme suit:

accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-Excel"

Cependant, comme vous pouvez le constater avec le fragment ci-dessous, Chrome 43.0, quelque chose semble ignorer simplement cette configuration, alors qu'il est parfaitement compris par Firefox 39.0.

J'ai envisagé de passer à une approche plus directe, en utilisant:

accept=".xls, .xlsx"

... qui fonctionne très bien dans Chrome mais rend quelque peu confus Firefox, n'acceptant que les fichiers dotés de l'extension .xlsx.

Considérant que ceci est probablement très courant et fondamental, il me manque quelque chose: où est-ce que je me trompe? Comment puis-je obtenir une entrée de fichier html5 pour suggérer uniquement les fichiers .xls et .xlsx de manière cohérente sur tous les navigateurs?

Voici un extrait de code illustrant mon problème (avec un lien JSFiddle au cas où vous voudriez le manipuler) .

Accepts application/vnd.ms-Excel and the likes:<br />
<label for="file1">File input</label>
<input type="file" name="file1" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-Excel"/>
<hr />
Accepts .xls and .xlsx:<br />
<label for="file2">File input</label>
<input type="file" name="file2" accept=".xls, .xlsx"/>

htmlfile-uploadinputcontent-type
17
ccjmne

Transférez-les à la fois de type mime et d'extension

<input type="file" name="file2" accept="text/csv, .csv"/>
11
cetver

AVERTISSEMENT: Ceci est pas une réponse par quelque moyen que ce soit, mais simplement une note aux lecteurs potentiels essayant d'utiliser cet attribut de manière erronée.

Sur cette référence non officielle du W3C de l'attribut accept, vous pouvez trouver les éléments suivants:

Conseil: N'utilisez pas cet attribut comme outil de validation. Les téléchargements de fichiers doivent être validés sur le serveur.

Il est non recommandé d'utiliser cet attribut à des fins de validation, car les utilisateurs pourraient le contourner et tous les navigateurs ne se comportent pas de la même manière.

1
Martin Godzina

Supprimer l'espace dans

accept=".xls, .xlsx"

à

accept=".xls,.xlsx"

Fonctionne sous Chrome 69 et Firefox 61. Je ne l'ai pas encore testé sur Safari, IE et Edge.

1
st0at

Premièrement: avez-vous vraiment un doctype html5?

<!DOCTYPE html>

Parce que si vous ne l'avez pas déjà fait, cela pourrait ne pas fonctionner à certains endroits. 

Deuxièmement: au lieu d’utiliser HTML, vous pouvez utiliser javascript ou jquery. Voir cette question/réponse: jquery - Vérifie l’extension du fichier avant de télécharger

Troisièmement: d'après mon expérience, certaines choses html5 ne fonctionnent tout simplement pas parfois. Je ne sais pas pourquoi, mais il devient nécessaire de résoudre des problèmes en utilisant, par exemple, jquery.

Quoi qu'il en soit, vous devez toujours effectuer une validation côté serveur pour vous assurer que ce que l'utilisateur télécharge correspond bien à ce que vous avez limité.

0
Jacbey