Mam obiekt do przesłania pliku na mojej stronie:
<input type="file" ID="fileSelect" />
z następującymi plikami Excel na moim pulpicie:
- plik1.xlsx
- plik1.xls
- plik.csv
Chcę przesłać plik TYLKO pokazać .xlsx
, .xls
, i .csv
pliki.
Korzystając z accept
atrybutu, zauważyłem, że te typy zawartości zadbały o rozszerzenia .xlsx
i .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/
Odpowiedzi:
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.
Prawidłowe typy akceptacji:
W przypadku plików CSV (.csv) użyj:
W przypadku plików Excel 97-2003 (.xls) użyj:
W przypadku plików Excel 2007+ (.xlsx) użyj:
W przypadku plików tekstowych (.txt) użyj:
W przypadku plików graficznych (.png / .jpg / etc) użyj:
W przypadku plików HTML (.htm, .html) użyj:
W przypadku plików wideo (.avi, .mpg, .mpeg, .mp4) użyj:
W przypadku plików audio (.mp3, .wav itp.) Użyj:
W przypadku plików PDF użyj:
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
WAV
lubPDF
), to prawie zawsze zadziała ...źródło
<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.Obecnie możesz po prostu użyć rozszerzenia pliku
źródło
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel
) nadal nie działa na Edge 41.16299.820.0 stackoverflow.com/questions/31875617/... wpdev.uservoice.com/forums/257854-microsoft-edge-developer/...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
Myślę, że pomoże ci to oczywiście zmienić ten skrypt w zależności od potrzeb.
źródło
accept
atrybutu 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.Użyłem
text/comma-separated-values
mime-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ą:
Źródło: http://filext.com/file-extension/CSV
źródło
To nie działało dla mnie w Safari 10:
Zamiast tego musiałem to napisać:
źródło
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:
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:
Akceptacja atrybutów ma pewne problemy z wieloma atrybutami i w tym przypadku nie działa poprawnie.
źródło
Zmodyfikowałem rozwiązanie @yogi. Dodatkowo, gdy plik ma niepoprawny format, resetuję wartość elementu wejściowego.
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.
źródło
Teraz możesz użyć nowego atrybutu sprawdzania poprawności wejścia HTML5
pattern=".+\.(xlsx|xls|csv)"
.źródło
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.