Selektor plików <input file>

<form action="..." enctype="multipart/form-data">
	<input type="file" name="nazwa">
</form>

Polecenie wprowadza selektor plików, składający się z dwóch pól (np. w Internet Explorerze):

1. pola tekstowego, w którym wpisuje się ścieżkę dostępu do pliku,
2. przycisku, po naciśnięciu którego, można przeszukać dysk, aby odnaleźć plik.

Selektor plików został wprowadzony teoretycznie po to, aby można było przesłać wybrany plik w załączniku do listu (formularza). Wtedy dla znacznika <form>...</form> należałoby dodatkowo użyć atrybut enctype="multipart/form-data". Niestety nowe przeglądarki generalnie nie interpretują tego polecenia. Ponadto w Internet Explorerze (6), jeśli użyjemy dla znacznika <form>...</form> podany wcześniej atrybut, a także w formularzu istnieje chociaż jeden selektor plików, to nie zostanie przesłany nie tylko załącznik, ale nawet dane z innych pól (MSIE 7.0 w ogóle nie wysyła danych w formularzach pocztowych z tym atrybutem)! Natomiast jeżeli atrybut enctype="..." nie zostanie podany, albo wpiszemy enctype="text/plain" (forma odszyfrowana), z formularzem zostanie przesłana jedynie ścieżka dostępu, wprowadzona do selektora plików.

Dla zaawansowanych
Wysyłanie plików w załączniku jest natomiast obsługiwane m.in. przez PHP (należy wtedy dla znacznika <form>...</form> konieczne podać atrybut: enctype="multipart/form-data").

Przykład <input file>

Zwróć uwagę, że po kliknięciu przycisku, otwiera się okienko z systemowym selektorem plików, a jeśli wybierzesz w nim jakiś plik, to w polu tekstowym pojawi się bezwzględna ścieżka dostępu do niego.

Długość pola (tekstowego) <input file size>

<input type="file" name="nazwa" size="k">

Przykład <input file size>

Blokada pola <input file disabled>

<input type="file" name="nazwa" disabled>

Wstawienie atrybutu disabled powoduje zablokowanie pola.

Przykład <input file disabled>

Filtr typu plików <form accept, input file accept>

<form action="..." enctype="multipart/form-data" accept="lista typów">
	<input type="file" name="nazwa">
</form>

<form action="..." enctype="multipart/form-data">
	<input type="file" name="nazwa" accept="lista typów">
</form>

Czasami oczekujemy, że użytkownik wyśle nam poprzez formularz konkretny typ pliku - np. obrazek. Możemy oczywiście podać gdzieś w widocznym miejscu informację, że np. przyjmujemy tylko pliki JPG i GIF, jednak taka informacja może zostać łatwo przeoczona. Poza tym skoro spodziewamy się tylko określonych typów plików, nie ma sensu, żeby użytkownik przeglądając swój dysk lokalny musiał się przedzierać przez inne pliki, które akurat znajdują się u niego w tym samym katalogu co pożądane obrazki.

Atrybut accept="..." nie jest wystarczającym zabezpieczeniem przed przesyłaniem niechcianych bądź niebezpiecznych typów plików za pomocą formularza, ponieważ przeglądarki i tak zwykle dają możliwość usunięcia filtru i wybrania dowolnego pliku! Jeżeli do odbierania danych używasz np. PHP, musisz nałożyć dodatkowe zabezpieczenie bezpośrednio w skrypcie.

Typ MIME

Istnieje możliwość określenia - dla całego formularza lub dla każdego selektora plików osobno - jakie typy są dopuszczalne. Niestety nie zawsze wystarczy podać po prostu listę akceptowanych rozszerzeń nazwy pliku, ponieważ teoretycznie to samo rozszerzenie pliku na różnych systemach operacyjnych może oznaczać zupełnie inny typ. Dlatego często korzysta się z tzw. typów MIME, których rejestracją zajmuje się organizacja IANA.

Aby sprawdzić, jaki typ MIME odpowiada danemu rozszerzeniu nazwy pliku, zobacz: Wykaz typów MIME.

Przykład <input file accept>

<input type="file" accept="image/jpeg,image/gif">

Wybierz obrazek JPG lub GIF (zwróć uwagę, że pliki innych typów nie powinny być widoczne w selektorze):

Rodzina ogólna

Oprócz tego w języku HTML5 można również określać ogólną rodzinę typu plików:

image/*

Obrazek w dowolnym formacie

audio/*

Muzyka w dowolnym formacie

video/*

Film w dowolnym formacie

Przykład <input file accept>

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

Wybierz obrazek w dowolnym formacie:

Rozszerzenie pliku

Język HTML5 pozwala również wprost wskazać rozszerzenie nazwy pliku. W takim przypadku należy jednak pamiętać, aby nazwa rozszerzenia była poprzedzona znakiem kropki (ale bez znaku gwiazdki!).

Przykład <input file accept>

<input type="file" accept=".jpeg,.jpg,.jpe">

Wybierz plik w formacie JPG:

Łączenie filtrów

Wszystkie powyższe sposoby można ze sobą łączyć w jednym atrybucie accept="...".

Przykład <input file accept>

<input type="file" name="..." accept="image/jpeg,audio/*,.gif">

Wybierz obrazek w formacie JPG, muzykę w dowolnym formacie albo plik w formacie GIF: