HTML Input = „plik” Akceptuj typ pliku atrybutu (CSV)

Mam obiekt do przesłania pliku na mojej stronie:

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

z następującymi plikami Excel na moim pulpicie:

1. plik1.xlsx
2. plik1.xls
3. plik.csv

Chcę przesłać plik TYLKO pokazać .xlsx, .xls, i .csvpliki.

Korzystając z acceptatrybutu, zauważyłem, że te typy zawartości zadbały o rozszerzenia .xlsxi .xls...

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

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

Nie mogę jednak znaleźć poprawnego typu zawartości dla pliku Excel CSV! Jakieś sugestie?

PRZYKŁAD: http://jsfiddle.net/LzLcZ/

Cóż, to krępujące ... Znalazłem rozwiązanie, którego szukałem i nie może być prostsze. Użyłem następującego kodu, aby uzyskać pożądany wynik. Mam nadzieję, że to pomoże komuś w przyszłości. Dziękuję wszystkim za pomoc.

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

Prawidłowe typy akceptacji:

W przypadku plików CSV (.csv) użyj:

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

W przypadku plików Excel 97-2003 (.xls) użyj:

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

W przypadku plików Excel 2007+ (.xlsx) użyj:

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

W przypadku plików tekstowych (.txt) użyj:

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

W przypadku plików graficznych (.png / .jpg / etc) użyj:

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

W przypadku plików HTML (.htm, .html) użyj:

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

W przypadku plików wideo (.avi, .mpg, .mpeg, .mp4) użyj:

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

W przypadku plików audio (.mp3, .wav itp.) Użyj:

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

W przypadku plików PDF użyj:

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

DEMO:
http://jsfiddle.net/dirtyd77/LzLcZ/144/

UWAGA:

Jeśli próbujesz wyświetlić pliki Excel CSV ( .csv), NIE używaj:

• text/csv
• application/csv
• text/comma-separated-values( działa tylko w Operze ).

Jeśli próbujesz wyświetlić określony typ pliku (na przykład a WAVlub PDF), to prawie zawsze zadziała ...

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

Obecnie możesz po prostu użyć rozszerzenia pliku

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

Dom ten atrybut jest bardzo stary i o ile wiem, nie jest akceptowany w nowoczesnych przeglądarkach, ale oto 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 pomoże ci to oczywiście zmienić ten skrypt w zależności od potrzeb.

Użyłem text/comma-separated-valuesmime-type CSV w atrybucie accept i działa on dobrze w Operze. Wypróbowanytext/csv bez szczęścia.

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

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

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

To nie działało dla mnie w Safari 10:

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

Zamiast tego musiałem to napisać:

<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 zainteresowany plik,

2) I uruchom w konsoli to:

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

Możesz również ustawić atrybut „wiele” dla danych wejściowych, aby sprawdzać typ zawartości dla kilku plików jednocześnie i wykonywać następujące czynności:

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

Akceptacja atrybutów ma pewne problemy z wieloma atrybutami i w tym przypadku nie działa poprawnie.

Zmodyfikowałem rozwiązanie @yogi. Dodatkowo, gdy plik ma niepoprawny format, resetuję 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ą niestandardową weryfikację, ponieważ w otwartym oknie pliku 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 sprawdzania poprawności wejścia HTML5 pattern=".+\.(xlsx|xls|csv)".