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>
Polecenie wprowadza selektor plików, składający się z dwóch pól:
- pola tekstowego, w którym wpisuje się ścieżkę dostępu do pliku,
- 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">
size="..."
.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>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 |
Komentarze
- 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
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
11.12.2023 22:20
Poprawiłem kod skryptu w kursie. Powinien już działać w PHP 8.
Zobacz więcej - 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
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
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
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
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ść
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ść
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