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

501

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/

Dom
źródło
większość przeglądarek nie przestrzega atrybutu accept, ponieważ można go użyć, aby zachęcić użytkowników, którzy nie zwracają uwagi na przesyłanie poufnych plików.
tletnes,
9
@tletnes nieprawda, jest obsługiwany przez większość głównych przeglądarek
Dom
Możesz również spróbować tego, jeśli ($ .trim ($ ('# OriginalFileName'). Val ())! = "") {Var ext = $ ('# OriginalFileName'). Val (). Split ('.') .pop (). toLowerCase (); if ($ .inArray (ext, ['doc', 'docx', 'pdf', 'xlsx', 'xls']) == -1) {$ ('# OriginalFileNameValid'). html ('Use .doc , .docx, .pdf ”); }}
Nithin Paul
W przypadku, gdy inni użytkownicy Ubuntu się tym mylą, zauważyłem, że w Ubuntu Firefox domyślnie wyświetla „Wszystkie pliki”, ale dodaje, niezależnie od atrybutu „zaakceptuj”, listę rozwijaną typu pliku w oknie dialogowym wyboru pliku.
mltsy,

Odpowiedzi:

1246

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" />
Dom
źródło
3
Wygląda na to, że Chrome obsługuje ten atrybut, ale Firefox nadal nad nim pracuje. Możesz zagłosować na tego błędu, aby szybciej go rozwiązać: bugzilla.mozilla.org/show_bug.cgi?id=826176
Salvatorelab
3
@DavidRouten atrybut accept będzie po prostu filtrować typy plików. Trzeba też użyć sprawdzania poprawności plików, aby uniemożliwić użytkownikom wybieranie innych typów plików. Mam nadzieję, że to pomaga!
Dom
1
<input type = "file" accept = ". csv" /> nie działa w przeglądarce Firefox. Czy jest jakieś inne rozwiązanie, które działa tak, jak działa to w Firefoksie.
Ganesa Vijayakumar
1
<input type="file" accept=".csv, text/csv" />pracował dla mnie w Firefox, Chrome i Opera na Macu. tylko .csv nie działał we wszystkich przeglądarkach.
tmas
1
Czy możesz dodać przykład pliku „xml”? To będzie pomocne. Z góry dziękuję.
ni8mr
38

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.

jog
źródło
5
Fajne obejście, ale nie rozumiem, dlaczego taki atrybut jest uważany za „stary”. Jest to podstawowa funkcja wyboru plików w prawie każdym systemie operacyjnym, przeglądarki powinny dołożyć wszelkich starań, aby działało, a to pomogłoby wielu użytkownikom ...
Christophe Roussy
1
Atrybut accept nie jest stary i jest obsługiwany w głównych przeglądarkach oprócz IE / Edge: caniuse.com/#feat=input-file-accept . Przeredaguj swoją odpowiedź, ponieważ jest ona myląca.
thomaux
2
Najważniejszym aspektem tego acceptatrybutu jest wskazówka, którą zapewnia okno dialogowe otwartego pliku. Użytkownik powinien mieć domyślnie pasujące pliki, prawdopodobnie z opcją wybrania innych typów, jeśli sobie tego życzy - tak właśnie zachowują się obecnie nowoczesne przeglądarki.
Coderer
13

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

jaysponsorowane
źródło
1
Cześć Dom! Chcę powiedzieć przepraszam, ponieważ twoja odpowiedź (oznaczona jako prawa) jest w porządku i nie zwracam na to uwagi wcześniej, ponieważ testowałem witrynę tylko w Operze. Po przetestowaniu w innych przeglądarkach widzę, że odpowiedź jest bardziej kompletna. Ale to nie działa we wszystkich przeglądarkach. Firefox 17 nie obsługuje attr, jak filtr w oknie dialogowym plików ( bugzilla.mozilla.org/show_bug.cgi?id=83749#c14 ), więc ta właściwość jest dla mnie trzymająca w napięciu. I tak użyję
jaysponsored
11

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" />
trojański
źródło
Cześć, działa również dobrze na moim safari. Ale co, jeśli chcemy zaakceptować dokumenty programu Excel? masz jakieś wskazówki? @trojan
gustav
Sprawdź odpowiedź Big Money. TLDR; <input type = "file" ID = "fileSelect" accept = ". xlsx, .xls, .csv" />
Sk. Irfan,
4

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.

Olga Lisovskaya
źródło
1

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.

RenatoIvancic
źródło
0

Teraz możesz użyć nowego atrybutu sprawdzania poprawności wejścia HTML5 pattern=".+\.(xlsx|xls|csv)".

iiic
źródło
10
Według MDN , jeśli This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored.chodzi o dane wejściowe do pliku, mówią dalejfile: 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