Válí se ti projekty v šuplíku? Dostaň je mezi lidi a získej cool tričko a body na profi IT kurzy v soutěži ITnetwork summer 2017!
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

input typu file - Český HTML 5 manuál

HTML a CSS Manuál Formuláře input typu file - Český HTML 5 manuál

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

Element <input> se používá ve formulářích, kde umožňuje uživateli vkládat data. Může mít mnoho podob, které se liší různým nastavením atributu type.

Input typu file umožňuje k formuláři připojit soubor. Ten se poté odešle spolu s formulářem.

Atributy:

  • accept - Umožňuje určit MIME typy souborů, které je přípustné vybrat. Můžeme využít speciálních hodnot audio/*, video/* a image/*. Dále můžeme samozřejmě uvést klasické MIME typy jako např. image/jpeg nebo text/plain. Je možné uvést více hodnot, které oddělíme čárkou.
  • multiple - Atribut je typu boolean. Pokud je uveden, je možné vybrat více souborů.

Pozor, pokud formulář obsahuje <input> typu file, je nutné, aby byl atribut enctype formuláře nastaven na hodnotu multipart/form-data.

Následující atributy jsou společné pro všechny typy inputů:

  • autocomplete - Nabývá hodnot on a off, přičemž on je výchozí. Pokud je autocomplete zapnutý, nabízí prohlížeč uživateli při vyplňování údajů našeptávač, který zobrazuje dříve zapsané hodnoty.
  • disabled - Atribut je typu boolean. Pokud je uveden, nelze měnit hodnotu elementu a ten je často zobrazen jako zašedlý.
  • list - Obsahuje id elementu datalist, položky listu poté slouží jako předdefinované možnosti <input> elementu.
  • readonly - Atribut je typu boolean. Pokud je uveden, nelze hodnoty v daném poli editovat.
  • name - Definuje jméno elementu. Jméno musí být unikátní vzhledem k formuláři a je po odeslání použito jako klíč v dvojici klíč-hodnota, která se na server odešle.
  • value - Přednastavená hodnota pole.
  • autofocus - Atribut je typu boolean. Pokud je uveden, element se zaktivní po načtení stránky.
  • form - Element může být definován mimo formulář a následně být k tomuto formuláři připojen uvedením atributu form s hodnotou id formuláře. Element může patřit více formulářům.
  • pattern - Obsahuje regulární výraz, podle kterého se má hodnota v poli validovat.
  • placeholder - Definuje text, který se zobrazí v případě, že je pole prázdné. Obvykle je vykreslen zašedle a slouží jako nápověda.
  • required - Atribut je typu boolean. Pokud je uveden, znamená to, že pole musí být pro odeslání formuláře vyplněné.

Ukázka nahrání souborů na web pomocí inputu typu file:

Připoj obrázek s tvojí originální podobou:<br />
<input type="file" name="foto" accept="image/*" />

Výsledek:

Ukázka formulářového pole input typu file

Pozor! Nemůžeme se spoléhat na to, že uživatel soubor daného typu neodešle. HTML stránka je na jeho počítači a on si může formulář přepsat a odeslat nám něco, co nechceme. S tím musí skript na druhé straně počítat a data stejně znovu zvalidovat!


 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (1)

 

 

Komentáře

Avatar
Martin Bednář (xbedm01):23.9.2013 19:26

Ahoj, mám dotaz: Odesílá se přes input typu file celý soubor, nebo jen cesta k němu?

Odpovědět 23.9.2013 19:26
I bez motta se dá žít
Avatar
Odpovídá na Martin Bednář (xbedm01)
Michal Maršálek:23.9.2013 19:31

Ahoj, jak by potom mohlo dojít k nahrání souboru na server, pokud by se nepřenášel?

 
Odpovědět 23.9.2013 19:31
Avatar
Odpovídá na Martin Bednář (xbedm01)
Michal Žůrek (misaz):23.9.2013 19:32

nevíš proč pak nahrávání videa na youtube trvá hodinu když by se tam posílala jen kraťoulinká cesta?

Odpovědět 23.9.2013 19:32
Nesnáším {}, proto se jim vyhýbám.
Avatar
Martin Bednář (xbedm01):23.9.2013 19:34

Dík za rychlé odpovědi!

Odpovědět 23.9.2013 19:34
I bez motta se dá žít
Avatar
Odpovídá na Michal Žůrek (misaz)
Neaktivní uživatel:1.4.2014 14:50

No a jak by se server k tomu tvému souboru asi dostal?
To je podobné jako když chceš spustit zástupce tvého souboru na jiném počítači - taky se ti to nepodaří

Odpovědět 1.4.2014 14:50
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Michal Žůrek (misaz):1.4.2014 14:54

Však on se na to ptal. Přečti si na koho odpovídám.

Odpovědět 1.4.2014 14:54
Nesnáším {}, proto se jim vyhýbám.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.