Przejdź do treści

HTML / Formularze

Selektor plików <INPUT file>

W jaki sposób umożliwić użytkownikowi wybranie pliku ze swojego dysku lokalnego?

<form action="..." enctype="multipart/form-data">
	<input type="file" name="nazwa">
</form>
gdzie jako "nazwa" należy wpisać krótką nazwę danego pola. Zostanie ona później wysłana wraz z formularzem.

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 przeglądarki raczej nie interpretują tego polecenia. Jedynie Netscape przesyła załącznik, ale tylko tekstowy, choć polskie znaki mogą zostać błędnie wyświetlone. Natomiast 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:

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.


Możliwe jest także podanie dodatkowych atrybutów:

  1. Długość pola (tekstowego):
    <input type="file" name="nazwa" size="k">
    gdzie jako "k" podaje się długość pola (tekstowego) w ilości znaków, które będą w nim jednocześnie widoczne (domyślnie 20 - w Internet Explorerze). Oczywiście użytkownik będzie mógł wpisać do takiego pola dowolną liczbę znaków, niezależnie od atrybutu size="...".

    Przykład:

    size="10"
  2. Blokada pola (nie obsługuje Opera 6):
    <input type="file" name="nazwa" disabled>

    Wstawienie atrybutu disabled powoduje zablokowanie pola.

    Przykład:

    To pole jest zablokowane (disabled).

Filtr typu plików

<form action="..." enctype="multipart/form-data" accept="lista typów">
	<input type="file" name="nazwa">
</form>
lub
<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 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 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 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 type="file" name="..." accept="image/jpeg,audio/*,.gif">

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

Komentarze

Zobacz więcej komentarzy

Facebook