Entrée HTML = "fichier" Accepter le type de fichier d'attribut (CSV)


501

J'ai un objet de téléchargement de fichier sur ma page:

<input type="file" ID="fileSelect" />

avec les fichiers Excel suivants sur mon bureau:

  1. file1.xlsx
  2. file1.xls
  3. file.csv

Je veux que le téléchargement de fichiers à seulement montrer .xlsx, .xls, et les .csvfichiers.

En utilisant l' acceptattribut, j'ai trouvé que ces types de contenu prenaient en charge les .xlsx& .xlsextensions ...

accept= application / vnd.openxmlformats-officedocument.spreadsheetml.sheet (.XLSX)

accept= application / vnd.ms-excel (.XLS)

Cependant, je ne trouve pas le type de contenu correct pour un fichier CSV Excel! Aucune suggestion?

EXEMPLE: http://jsfiddle.net/LzLcZ/


la plupart des navigateurs ne respectent pas l'attribut accept car il peut être utilisé pour inciter les utilisateurs qui ne font pas attention à transmettre des fichiers sensibles.
tletnes

9
@tletnes pas vrai, il est pris en charge par la plupart des principaux navigateurs
Dom

Vous pouvez également essayer ceci si ($ .trim ($ ('# OriginalFileName'). Val ())! = "") {Var ext = $ ('# OriginalFileName'). Val (). Split ('.') .pop (). toLowerCase (); if ($ .inArray (ext, ['doc', 'docx', 'pdf', 'xlsx', 'xls']) == -1) {$ ('# OriginalFileNameValid'). html ('Use .doc , .docx, fichiers .pdf '); }}
Nithin Paul

Dans le cas où d'autres utilisateurs d'Ubuntu seraient confus par cela, j'ai trouvé que dans Ubuntu, Firefox par défaut affiche "Tous les fichiers", mais ajoute tout ce que votre attribut "accepter" est au menu déroulant de type de fichier dans la boîte de dialogue de sélection de fichiers.
mltsy

Réponses:


1248

Et bien c'est embarrassant ... J'ai trouvé la solution que je cherchais et ça ne pourrait pas être plus simple. J'ai utilisé le code suivant pour obtenir le résultat souhaité. J'espère que cela aidera quelqu'un à l'avenir. Merci à tous pour votre aide.

<input id="fileSelect" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />  

Types d'acceptation valides:

Pour les fichiers CSV (.csv), utilisez:

<input type="file" accept=".csv" />

Pour les fichiers Excel 97-2003 (.xls), utilisez:

<input type="file" accept="application/vnd.ms-excel" />

Pour les fichiers Excel 2007+ (.xlsx), utilisez:

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

Pour les fichiers texte (.txt), utilisez:

<input type="file" accept="text/plain" />

Pour les fichiers image (.png / .jpg / etc), utilisez:

<input type="file" accept="image/*" />

Pour les fichiers HTML (.htm, .html), utilisez:

<input type="file" accept="text/html" />

Pour les fichiers vidéo (.avi, .mpg, .mpeg, .mp4), utilisez:

<input type="file" accept="video/*" />

Pour les fichiers audio (.mp3, .wav, etc.), utilisez:

<input type="file" accept="audio/*" />

Pour les fichiers PDF , utilisez:

<input type="file" accept=".pdf" /> 

DÉMO:
http://jsfiddle.net/dirtyd77/LzLcZ/144/


REMARQUE:

Si vous essayez d'afficher des fichiers Excel CSV ( .csv), n'utilisez PAS :

  • text/csv
  • application/csv
  • text/comma-separated-values( fonctionne uniquement dans Opera ).

Si vous essayez d'afficher un type de fichier particulier (par exemple, un WAVou PDF), cela fonctionnera presque toujours ...

 <input type="file" accept=".FILETYPE" />

3
Il semble que Chrome prenne en charge cet attribut, mais Firefox y travaille toujours. Vous pouvez voter pour ce bug afin qu'ils le résolvent plus rapidement: bugzilla.mozilla.org/show_bug.cgi?id=826176
Salvatorelab

3
@DavidRouten l'attribut accept filtrerait simplement les types de fichiers. Vous devez également utiliser la validation de fichier pour empêcher les utilisateurs de sélectionner d'autres types de fichiers. J'espère que cela pourra aider!
Dom

1
<input type = "file" accept = ". csv" /> ne fonctionne pas dans Firefox. Existe-t-il une autre solution à faire fonctionner dans Firefox?
Ganesa Vijayakumar

1
<input type="file" accept=".csv, text/csv" />travaillé pour moi dans firefox, chrome et opera sur mac. seul .csv ne fonctionnait pas dans tous les navigateurs.
tmas

1
Pouvez-vous ajouter un exemple de fichier "xml"? Ce sera utile. Merci d'avance.
ni8mr


38

Dom cet attribut est très ancien et n'est pas accepté dans les navigateurs modernes pour autant que je sache, mais voici une alternative, essayez ceci

<script type="text/javascript" language="javascript">
function checkfile(sender) {
    var validExts = new Array(".xlsx", ".xls", ".csv");
    var fileExt = sender.value;
    fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
    if (validExts.indexOf(fileExt) < 0) {
      alert("Invalid file selected, valid files are of " +
               validExts.toString() + " types.");
      return false;
    }
    else return true;
}
</script>

<input type="file" id="file" onchange="checkfile(this);" />

Je suppose que cela vous aidera bien sûr, vous pouvez modifier ce script en fonction de vos besoins.


5
Solution de contournement sympa mais je ne comprends pas pourquoi un tel attribut est considéré comme «ancien». Il s'agit d'une fonction de sélection de fichier de base sur presque tous les systèmes d'exploitation, les navigateurs devraient faire de leur mieux pour le faire fonctionner et cela aiderait de nombreux utilisateurs ...
Christophe Roussy

1
L'attribut accept n'est pas ancien et est pris en charge dans les principaux navigateurs, à l'exception d'IE / Edge: caniuse.com/#feat=input-file-accept . Veuillez reformuler votre réponse car elle est erronée.
thomaux

2
L'aspect le plus important de l' acceptattribut est l'indice qu'il fournit à la boîte de dialogue de fichier ouvert. L'utilisateur devrait se voir présenter par défaut des fichiers correspondants, probablement avec une option pour sélectionner d'autres types s'il le souhaite - c'est ainsi que la plupart des navigateurs modernes se comportent maintenant.
Coderer

13

J'ai utilisé le text/comma-separated-valuestype mime CSV dans l'attribut accept et cela fonctionne bien dans Opera. Essayé text/csvsans chance.

Certains autres types MIME pour CSV si les suggestions ne fonctionnent pas:

  • texte / valeurs séparées par des virgules
  • texte / csv
  • application / csv
  • application / excel
  • application / vnd.ms-excel
  • application / vnd.msexcel
  • texte / texte

Source: http://filext.com/file-extension/CSV


1
Salut Dom! Je veux dire désolé car votre réponse (marquée comme à droite) est OK et je n'y ai pas prêté beaucoup d'attention auparavant car je testais le site uniquement dans Opera. Après avoir testé dans d'autres navigateurs, je constate que votre réponse est plus complète. Mais cela ne fonctionne pas dans tous les navigateurs. Firefox 17 ne prend pas en charge l'acceptation d'un filtre dans la boîte de dialogue Fichier ( bugzilla.mozilla.org/show_bug.cgi?id=83749#c14 ), cette propriété est donc suspense pour moi. J'utiliserai quand même la validation du fichier javascript, mais utilisez text / csv dans accept attr parce que c'est la valeur par défaut de IANA iana.org/assignments/media-types
jaysponsored

11

Cela n'a pas fonctionné pour moi sous Safari 10:

<input type="file" accept=".csv" />

J'ai dû écrire ceci à la place:

<input type="file" accept="text/csv" />

Salut, ça marche bien aussi sur mon safari. Mais comment faire si nous voulons accepter des documents Excel? avez-vous une idée? @trojan
gustav

Vérifiez la réponse de Big Money. TLDR; <input type = "file" ID = "fileSelect" accept = ". xlsx, .xls, .csv" />
Sk. Irfan

4

Vous pouvez connaître le type de contenu correct pour n'importe quel fichier en procédant simplement comme suit:

1) Sélectionnez le fichier intéressé,

2) Et lancez dans la console ceci:

console.log($('.file-input')[0].files[0].type);

Vous pouvez également définir l'attribut "multiple" pour votre entrée pour vérifier le type de contenu de plusieurs fichiers à la fois et faire ensuite:

for (var i = 0; i < $('.file-input')[0].files.length; i++){
    console.log($('.file-input')[0].files[i].type);
}

L'acceptation d'attribut a quelques problèmes avec plusieurs attributs et ne fonctionne pas correctement dans ce cas.


1

J'ai modifié la solution de @yogi. L'ajout est que lorsque le fichier est de format incorrect, je réinitialise la valeur de l'élément d'entrée.

function checkFile(sender, validExts) {
    var fileExt = sender.value;
    fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
    if (validExts.indexOf(fileExt) < 0 && fileExt != "") {
        alert("Invalid file selected, valid files are of " +
                 validExts.toString() + " types.");
        $(sender).val("");
        return false;
    }
    else return true;
}

J'ai un buildin de vérification personnalisé, car dans la fenêtre de fichier ouverte, l'utilisateur peut toujours choisir les options "Tous les fichiers ('*')", que je définisse explicitement l'attribut accept dans l'élément d'entrée.


0

Vous pouvez maintenant utiliser le nouvel attribut de validation d'entrée html5 pattern=".+\.(xlsx|xls|csv)".


10
Selon MDN , en This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored.ce qui concerne l'entrée du fichier, ils continuentfile: A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.
Dom
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.