HTML Input = "fichier" accepter le type de fichier D'attribut (CSV)

Ces jours-ci, 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 changer ce script en fonction de vos besoins.

J'ai utilisé text/comma-separated-values pour le type MIME CSV dans l'attribut accept et cela fonctionne bien dans Opera. Essayé text/csv sans chance.

Quelques autres MIME-Types pour CSV si le suggéré ne fonctionne pas:

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

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 exécutez 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 pour 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);
}

Attribute accept 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 buildin de vérification personnalisée, car dans la fenêtre Ouvrir un fichier, 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.

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

Utiliser regex serait plus rapide

    function checkIsExcel(file) {
        if ((!/.*\.xlsx$/.test(file.name)) && (!/.*\.xls$/.test(file.name)) && (!/.*\.csv$/.test(file.name))) {
            return false;
        }
        return true;
    }