Moderní tvorba webových aplikací

O webu

Resetování <input type=file>

Jak resetovat (odstranit) hodnotu z <input>u pro upload souborů.

3 minuty

Z bezpečnostních důvodů platí pro uploadovací formulářové políčko trochu jiná pravidla.

Například není možné přistupovat JavaScriptem k jeho hodnotě ve stejné míře jako u jiných políček.

  • Přenastavení hodnoty uploadInput.value = "něco" selže.

  • Přečtení hodnoty alert(uploadInput.value) vrátí jen smyšlenou cestu: C:\fakepath\nazev-souboru.txt. Ve starších prohlížečích Firefox je název souboru.)

Je to docela pochopitelné, protože jinak by si majitel stránky mohl nahrávat libovolné soubory z disku návštěvníka tipováním jejich cest.

Jak vymazat pole pro upload

  1. Jedna možnost je použít běžné resetovací tlačítko (např. <input type=reset>) — to ale vymaže celý formulář.

  2. Druhá možnost je nahrávací <input> vymazat, tj. nastavit jeho value na "":

    formular.nazevPole.value = "";

    Smazání je jediná možnost, jak měnit hodnotu tohoto pole. Nastavení něčeho jiného, než je prázdný řetězec skončí chybout:

    Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

Starší prohlížeče

Výše uvedené řešení nefunguje v IE 10 a starších. V ostatních prohlížečích nešel tento postup použít ještě v roce 2014.

Pro tyto případy existuje ještě jedna možnost — přepsat JavaScriptem obsah políčka tím samým obsahem.

<span id="obal">
  <input name="upload" type="file">
</span>
<button onclick="
  document.getElementById('obal').innerHTML = document.getElementById('obal').innerHTML
">
  Odstranit
</button>

Živá ukázka

U javascriptového resetovacího tlačítka je nutno dát pozor na to, aby nechtěně neodesílalo formulář. Tomu zabrání buď return false, nebo tlačítko, co formulář neodešle, což je <input> nebo <button> s type=button.

Hodnota <input type=file>

Související články

Odeslání formuláře tlačítkem mimo něj

Jak odeslat formulář tlačítkem, které je mimo formulář.

3 minuty

HTML značka <input>

Všechny varianty značky <input>, možné atributy, vysvětlení a ukázky.

13 minut

Atribut autocapitalize

HTML atribut autocapitalize slouží k nastavení automatického přepnutí na velká písmena u dotykových klávesnic.

6 minut

Automatické vyplňování formulářů

Pomocí atributu autocomplete jde usnadnit a zrychlit vyplňování formulářů.

4 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025