Moderní tvorba webových aplikací

O webu

Upload souborů bez obnovení stránky

Jak vytvořit ajaxové nahrávání souborů na server bez obnovení stránky.

3 minuty

Možné řešení je uploadovací formulář odeslat na zpracovávající skript do neviditelného <iframe>, soubor se nahraje a skript zavolá funkci z nadřazené stránky a předá jí výsledek snažení.

Nahrávání bez refreshe

Po kliknutí na „Upload“ se soubor odešle do skrytého <iframe>u na skript, který soubor zpracuje a zavolá funkci na této stránce s předaným parametrem (pro pochopení si zobrazte zdrojový kód).

Ukázka (nic se nikam nenahrává)

Soubor s formulářem

Funkce uploadStatus se bude volat ze stránky načtené v <iframe>u prostřednictvím window.top.window.uploadStatus().

<script>
function uploadStatus(status) {
	alert(status);
}
</script>
<iframe id="frame" name="frame" src="" style="display: none"></iframe>

<form action="upload.php" method="post" enctype="multipart/form-data" target="frame"> 
  <input type="file" name="file"> 
  <input type="submit" name="upload" value="Upload"> 
</form> 

Soubor pro nahrávání upload.php

<?php
// Vlastní nahrání souboru
$stav = "Hláška ze souboru, který uploaduje.";
?>
<script> 
  window.top.window.uploadStatus("<?php echo $stav ?>");
</script>

Vlastní upload v PHP může vypadat nějak takto.

Vypnutý JavaScript

Bude-li mít uživatel vypnutý JS, je toto řešení značně problematické — po odeslání do neviditelného rámu se zdánlivě nic nestane.

  1. V případě, že potřebujeme funkčnost i bez JS a není potřeba s výsledky uploadu ihned dále pracovat, může se výsledek vypsat přímo do rámu, který bude v takovém případě viditelný.
  2. Je-li s výsledky potřeba pracovat, nezbývá než použít standardní odesílání.

Související články

Detekce otevření DevTools

Jak zjistit, že se na stránce otevřely vývojářské nástroje.

13 minut

JavaScript null a undefined

Rozdíly mezi null a undefined v JavaScriptu, kdy je používat a jak se vyhnout běžným chybám.

12 minut

Stylování <input type=number>

Jak stylovat <input> pro zadávání čísel.

7 minut

Sleep v JavaScriptu

Jak implementovat sleep/delay funkcionalitu v JavaScriptu pomocí Promise a async/await

6 minut

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