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

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/

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" />

De nos jours, vous pouvez simplement utiliser l'extension de fichier

<input type="file" ID="fileSelect" accept=".xlsx, .xls, .csv"/>

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.

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

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" />

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.

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.

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