Przejdź do treści

Selektor plików <input "file">

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

Selektor plików <input "file"> #

<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:

  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 w przypadku prostego formularza pocztowego.

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").

W języku HTML5 możliwe jest ustawienie opcji pozwalającej na wybór wielu plików jednoczenie (przy pomocy klawisza Shift lub/i Ctrl). W tym celu do znacznika wystarczy przypisać dodatkowy atrybut logiczny (podawany bez wartości):

📋 Zaznacz kod ▶ Edytuj na żywo

<input type="file" multiple>

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">
gdzie jako "k" podaje się długość pola (tekstowego) w ilości znaków, które będą w nim jednocześnie widoczne. Oczywiście użytkownik będzie mógł wpisać do takiego pola dowolną liczbę znaków, niezależnie od atrybutu size="...".

Przykład <input "file" size>

size="10"

Blokada pola <input "file" disabled> #

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

Wstawienie atrybutu disabled powoduje zablokowanie pola.

Przykład <input "file" disabled>

To pole jest zablokowane (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>
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 "file" accept>

📋 Zaznacz kod ▶ Edytuj na żywo

<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>

📋 Zaznacz kod ▶ Edytuj na żywo

<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>

📋 Zaznacz kod ▶ Edytuj na żywo

<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>

📋 Zaznacz kod ▶ Edytuj na żywo

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

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

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
Poziom wsparcia
min. 2,5 roku
<input type="file">1
2008-12-11
1
2004-11-09
12
2015-07-29
11
2010-12-16
1
2003-06-23
 100%

Komentarze #

  • Sławomir Kokłowski
    Sławomir Kokłowski

    04.04.2024 07:16
    Nie trzeba zmieniać znaku pytajnika. Nie ma znaczenia, czy witryna korzysta z Bootstrapa. Wystarczy stworzyć taką samą podstronę jak pozostałe, w miejscu gdzie ma być formularz kontaktowy wstawić kod https://www.kurshtml.edu.pl/html/wyslanie_formularza_bez_programu_pocztowego,formularze.html i...
    Zobacz więcej

  • tom3kk
    tom3kk

    03.04.2024 23:13
    <form action="?" method="post">
    w znaku zapytania adres strony z /formularz.php?
    jak mam boostrap to w tym pliku formularz.php musze cos potpinac?
    Zobacz więcej

  • Sławomir Kokłowski
    Sławomir Kokłowski

    11.12.2023 22:20
    Poprawiłem kod skryptu w kursie. Powinien już działać w PHP 8.
    Zobacz więcej

  • mateuszcom
    mateuszcom

    11.12.2023 15:45
    Pewnie masz włączoną wersję PHP 8.0 (lub wyższą) dla tego wywala Ci błąd z get_magic_quotes_gpc(). Zamiast tego użyj stripslashes()
    Zobacz więcej

  • foczka344
    foczka344

    11.12.2023 11:47
    Tablice wyświetla, ale coś jeszcze trzeba zmienić? bo albo wystąpił błąd, albo
    jak wstawię: [...] to komunikat: [...] ale, poczta nie dochodzi.
    Przy okazji czy ktoś wysyła z poziomu php, mail-a na localhost na xammp serwer ?
    Chodzi o komunikat, który także jest opisany w dokumentacji php: [...]...
    Zobacz więcej

  • mateuszcom
    mateuszcom

    11.12.2023 08:29
    W tablicy $_POST masz przekazywane wszystkie pola formularza, które posiadają atrybut NAME. Nie musisz ich deklarować, ponieważ znajdują się w strukturze tablicy $_POST. Dla testu możesz sobie wyświetlić na początku kodu całą zawartość tablicy $_POST, np. za pomocą [...] [...] dodane tylko po...
    Zobacz więcej

  • foczka344
    foczka344

    10.12.2023 15:17
    Czy ten formularz po skopiowaniu powinien dziać?
    https://www.kurshtml.edu.pl/html/wyslanie_formularza_bez_programu_pocztowego,formularze.html
    Dodałem dwa pola, i podałem faktyczny adres email:
    Ta pętla 'foreach', wyłapuje wszystkie podane zmienne, nie trzeba deklarować...
    Zobacz więcej

  • Łukasz Skop
    Łukasz Skop

    05.08.2023 16:05
    Lepiej będzie jak będę zarejestrowany niż tylko gość ... bo tu będę częściej :P
    Juz prawie
    Kod poniżej robi to co chciałem ... pozostaje sformatowanie tekstu
    Prostymi sposobami go ułożyłem ale wolałbym to za pomocą css lub konkretów ;)
    kod...
    Zobacz więcej

  • Gość
    Gość

    05.08.2023 00:54
    Tu trochę lepiej to wygląda
    Nie wiem jak tak ładnie na forum wklejać je ale pewnie znajdę opcję...
    Zobacz więcej

  • Gość
    Gość

    04.08.2023 23:47
    Takie coś wyszło ... ale nie mogę pozbyć się po generowaniu tych nieszczęsnych BOX 1/2/3/4...
    Zobacz więcej

Zobacz więcej komentarzy

Facebook