HTML Input= "file" Accept atrybut Typ pliku (CSV)

W dzisiejszych czasach możesz po prostu użyć rozszerzenia pliku

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

Dom ten atrybut jest bardzo stary i nie jest akceptowany w nowoczesnych przeglądarkach, o ile wiem, ale tutaj jest alternatywa dla niego, spróbuj tego

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

Myślę, że to ci pomoże oczywiście możesz zmienić ten skrypt zgodnie z Twoimi potrzebami.

Użyłem text/comma-separated-values do CSV mime-type w atrybucie accept i działa dobrze w Operze. Próbowałem text/csv bez powodzenia.

Niektóre inne typy MIME dla CSV, jeśli sugerowane nie działają:

• wartości oddzielone przecinkami
• tekst / csv
• application / csv
• application / excel
• application / vnd. ms-excel
• application / vnd.msexcel
• tekst / anytext

Źródło: http://filext.com/file-extension/CSV

To mi nie wyszło pod Safari 10:

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

Musiałem napisać to zamiast:

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

Możesz znać poprawny typ zawartości dla dowolnego pliku, wykonując następujące czynności:

1) wybierz interesujący plik,

2) i uruchom w konsoli to:

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

Możesz również ustawić atrybut "multiple" dla Twojego wejścia, aby sprawdzić typ zawartości dla kilku plików naraz i wykonać następny:

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

Atrybut accept ma pewne problemy z wieloma atrybutami i nie działa poprawnie w tym przypadku.

Zmodyfikowałem rozwiązanie @yogi. Dodatek polega na tym, że gdy plik ma nieprawidłowy format, zresetuję wartość elementu wejściowego.

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;
}

Mam wbudowaną weryfikację niestandardową, ponieważ w oknie open file użytkownik nadal może wybrać opcje "wszystkie pliki (' * ' )", niezależnie od tego, czy jawnie ustawiłem atrybut accept w elemencie wejściowym.

Teraz możesz użyć nowego atrybutu HTML5 input validation pattern=".+\.(xlsx|xls|csv)".

Użycie regex byłoby szybsze

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