Przejdź do treści

Formularze

Selektor plików

<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="disabled" />

    Wstawienie atrybutu disabled="disabled" powoduje zablokowanie pola.

    Przykład:

    To pole jest zablokowane (disabled="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.

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.

Popularne typy MIME
RozszerzenieMIMENazwa
*.3gppaudio/3gpp, video/3gpp3GPP Audio/Video
*.ac3audio/ac3AC3 Audio
*.asfallpication/vnd.ms-asfAdvanced Streaming Format
*.auaudio/basicAU Audio
*.csstext/cssCascading Style Sheets
*.csvtext/csvComma Separated Values
*.docapplication/mswordMS Word Document
*.dotapplication/mswordMS Word Template
*.dtdapplication/xml-dtdDocument Type Definition
*.dwgimage/vnd.dwgAutoCAD Drawing Database
*.dxfimage/vnd.dxfAutoCAD Drawing Interchange Format
*.gifimage/gifGraphic Interchange Format
*.htmtext/htmlHyperText Markup Language
*.htmltext/htmlHyperText Markup Language
*.jp2image/jp2JPEG-2000
*.jpeimage/jpegJPEG
*.jpegimage/jpegJPEG
*.jpgimage/jpegJPEG
*.jstext/javascript, application/javascriptJavaScript
*.jsonapplication/jsonJavaScript Object Notation
*.mp2audio/mpeg, video/mpegMPEG Audio/Video Stream, Layer II
*.mp3audio/mpegMPEG Audio Stream, Layer III
*.mp4audio/mp4, video/mp4MPEG-4 Audio/Video
*.mpegvideo/mpegMPEG Video Stream, Layer II
*.mpgvideo/mpegMPEG Video Stream, Layer II
*.mppapplication/vnd.ms-projectMS Project Project
*.oggapplication/ogg, audio/oggOgg Vorbis
*.pdfapplication/pdfPortable Document Format
*.pngimage/pngPortable Network Graphics
*.potapplication/vnd.ms-powerpointMS PowerPoint Template
*.ppsapplication/vnd.ms-powerpointMS PowerPoint Slideshow
*.pptapplication/vnd.ms-powerpointMS PowerPoint Presentation
*.rtfapplication/rtf, text/rtfRich Text Format
*.svfimage/vnd.svfSimple Vector Format
*.tifimage/tiffTagged Image Format File
*.tiffimage/tiffTagged Image Format File
*.txttext/plainPlain Text
*.wdbapplication/vnd.ms-worksMS Works Database
*.wpsapplication/vnd.ms-worksWorks Text Document
*.xhtmlapplication/xhtml+xmlExtensible HyperText Markup Language
*.xlcapplication/vnd.ms-excelMS Excel Chart
*.xlmapplication/vnd.ms-excelMS Excel Macro
*.xlsapplication/vnd.ms-excelMS Excel Spreadsheet
*.xltapplication/vnd.ms-excelMS Excel Template
*.xlwapplication/vnd.ms-excelMS Excel Workspace
*.xmltext/xml, application/xmlExtensible Markup Language
*.zipaplication/zipCompressed 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.

Zobacz także

Komentarze

Zobacz więcej komentarzy