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>
Polecenie wprowadza selektor plików, składający się z dwóch pól (np. w Internet Explorerze):
- 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 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:
- 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 atrybutusize="..."
.Przykład:
- Blokada pola (nie obsługuje Opera 6):
<input type="file" name="nazwa" disabled>
Wstawienie atrybutu
disabled
powoduje zablokowanie pola.Przykład:
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.
Istnieje możliwość określenia - dla całego formularza lub dla każdego selektora plików osobno - jakie typy są dopuszczalne. Niestety nie wystarczy podać listy akceptowanych rozszerzeń nazwy pliku, ponieważ teoretycznie to samo rozszerzenie pliku na różnych systemach operacyjnych może oznaczać zupełnie inny typ. Korzysta się natomiast z tzw. typów MIME, których rejestracją zajmuje się organizacja IANA. Na przykład, aby pozwolić użytkownikowi na wysłanie tylko obrazków JPG lub GIF, należy podać:
<input type="file" name="..." accept="image/jpeg,image/gif">
Zwracam uwagę, że lista typów nie może zawierać znaków spacji! Separatorem elementów listy jest tylko sam znak przecinka.
Rozszerzenie | MIME | Nazwa |
---|---|---|
*.3gpp | audio/3gpp, video/3gpp | 3GPP Audio/Video |
*.ac3 | audio/ac3 | AC3 Audio |
*.asf | allpication/vnd.ms-asf | Advanced Streaming Format |
*.au | audio/basic | AU Audio |
*.css | text/css | Cascading Style Sheets |
*.csv | text/csv | Comma Separated Values |
*.doc | application/msword | MS Word Document |
*.dot | application/msword | MS Word Template |
*.dtd | application/xml-dtd | Document Type Definition |
*.dwg | image/vnd.dwg | AutoCAD Drawing Database |
*.dxf | image/vnd.dxf | AutoCAD Drawing Interchange Format |
*.gif | image/gif | Graphic Interchange Format |
*.htm | text/html | HyperText Markup Language |
*.html | text/html | HyperText Markup Language |
*.jp2 | image/jp2 | JPEG-2000 |
*.jpe | image/jpeg | JPEG |
*.jpeg | image/jpeg | JPEG |
*.jpg | image/jpeg | JPEG |
*.js | text/javascript, application/javascript | JavaScript |
*.json | application/json | JavaScript Object Notation |
*.mp2 | audio/mpeg, video/mpeg | MPEG Audio/Video Stream, Layer II |
*.mp3 | audio/mpeg | MPEG Audio Stream, Layer III |
*.mp4 | audio/mp4, video/mp4 | MPEG-4 Audio/Video |
*.mpeg | video/mpeg | MPEG Video Stream, Layer II |
*.mpg | video/mpeg | MPEG Video Stream, Layer II |
*.mpp | application/vnd.ms-project | MS Project Project |
*.ogg | application/ogg, audio/ogg | Ogg Vorbis |
application/pdf | Portable Document Format | |
*.png | image/png | Portable Network Graphics |
*.pot | application/vnd.ms-powerpoint | MS PowerPoint Template |
*.pps | application/vnd.ms-powerpoint | MS PowerPoint Slideshow |
*.ppt | application/vnd.ms-powerpoint | MS PowerPoint Presentation |
*.rtf | application/rtf, text/rtf | Rich Text Format |
*.svf | image/vnd.svf | Simple Vector Format |
*.tif | image/tiff | Tagged Image Format File |
*.tiff | image/tiff | Tagged Image Format File |
*.txt | text/plain | Plain Text |
*.wdb | application/vnd.ms-works | MS Works Database |
*.wps | application/vnd.ms-works | Works Text Document |
*.xhtml | application/xhtml+xml | Extensible HyperText Markup Language |
*.xlc | application/vnd.ms-excel | MS Excel Chart |
*.xlm | application/vnd.ms-excel | MS Excel Macro |
*.xls | application/vnd.ms-excel | MS Excel Spreadsheet |
*.xlt | application/vnd.ms-excel | MS Excel Template |
*.xlw | application/vnd.ms-excel | MS Excel Workspace |
*.xml | text/xml, application/xml | Extensible Markup Language |
*.zip | aplication/zip | Compressed Archive |
Polecenie nie obsługuje Firefox.
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.
Przykład:
Wybierz obrazek JPG lub GIF (zwróć uwagę, że pliki innych typów nie powinny być widoczne w selektorze):
Jeśli używasz MSIE, prawdopodobnie odpowiedni filtr typu pliku musisz wybrać w oknie selektora, jednak powinien on być od razu zdefiniowany i gotowy do wyboru. W przypadku przeglądarki Firefox niestety prawdopodobnie nie zobaczysz żadnej różnicy w stosunku do standardowego selektora plików.