Upload súborov s progress bar-om

26.6.2009 13:30 | Přečteno: 5153× | Web | poslední úprava: 26.6.2009 13:29

Väčšina internetových prehliadačov nevie zobrazovať priebeh odosielania súboru. Pri odosielaní veľkých súborov cez pomalú linku môže táto operácia trvať veľmi dlho pričom užívateľ nemá žiadne informácie o priebehu. Ak Vás zaujíma, ako sa tento problém rieši pomocou PHP, AJAX-u a APC čítajte ďalej.

Štandardný upload súborov

Súbory sa štandardne uploadujú cez POST dáta. Všetko čo na upload budeme potrebovať je HTML stránka s formulárom na strane klienta a PHP skript spracujúci súbor na strane serveru. Po odoslaní súboru sa stránka správa rovnako ako pri veľkom oneskorení spojenia so serverom. Užívateľa „informuje“ o priebehu operácie prehliadač, ktorý má informácie o množstve odoslaných dát a celkovej veľkosti. A to je hlavný problém – takmer žiaden prehliadač (myslím, že to zobrazuje len Opera) nezobrazuje priebeh.

Klientská časť

Na strane klienta si vystačíme s jednoduchým formulárom. Kódovanie dát formulára (enctype) je dobré prispôsobiť pre odosielanie binárnych súborov. Pole pre odoslanie súboru je štandardný input s typom file. Podobne ako u ostatných polí, aj tu je identifikátorom poľa atribút name. Nasledujúci formulár odošle súbor identifikovaný kľúčom „mojSubor“. Skript starajúci sa o spracovanie odoslaného súboru je upload.php.

<form method="post"
      action="upload.php"
      enctype="multipart/form-data">
  <fieldset>
    <legend>Upload</legend>
    <div>
      <input type="file" name="mojSubor" />
      <input type="submit" value="Upload" id="submit" />
    </div>
  </fieldset>
</form>

Serverová časť

Kód, ktorý spracuje prijatý súbor sa spustí až po odoslaní dát. Zatiaľ sa súbor uploaduje do dočasného adresára. Programátor musí napísať jedine kód pre presun súboru z dočasného adresára do cieľového adresára. Nasledujúci program demonštruje jednoduchosť serverovej časti. Skript najskôr testuje, či bol súbor vôbec odoslaný, ďalej prebehne kontrola úspešnosti prenosu súboru a nakoniec presunie súbor do požadovaného adresára (v tomto prípade adresár, v ktorom tento skript).

<?php
$key = 'mojSubor';
if (!isset($_FILES[$key]) ||
    $_FILES[$key]['error'] != UPLOAD_ERR_OK ||
    !move_uploaded_file($FILES[$key]['tmp_name'],
                        dirname(__FILE__).'/'.$FILES[$key]['name']))
{
  echo('Chyba!');
}
else
{
  echo('OK');
}

✓ Výhody

• Bezproblémová podpora
• Jednoduchosť riešenia
• Prístupnosť

✗ Nevýhody

• Väčšina prehliadačov nezobrazuje stav prenosu

Riešenie pomocou AJAX-u

Teraz si predstavte, že ste v úlohe človeka, ktorý píše web s uploadom veľkých súborov (povedzme videá). Zistíte, že veľa užívateľov zruší spojenie. Skúmaním dôjdete k záveru – používatelia nie sú informovaní o prenose súboru a preto ho zrušia pred dokončením. V podstate máte dve možnosti: tlačiť vývojárov prehliadačov, aby implementovali upload progress bar, alebo si ho implementujete sami. Žiaľ toto je pri vývoji webu veľmi častý prípad, veď načo upraviť zopár prehliadačov, namiesto toho radšej upravme všetky weby.

Ak Vás teda predchádzajúci odstavec neodradil čítajte pokojne ďalej. Úlohou tohto blogu nie je naučiť Vás urobiť upload so zobrazením priebehu, ale ukázať aké sú tieto riešenia zlé.

Princíp

Všetky riešenia využívajú vlastnosti rfc1867. Väčšina prehliadačov pri odosielaní súboru odošle aj celkovú veľkosť dát. Prehliadač u klienta periodicky zisťuje množstvo prenesených dát na serveri a celkovú veľkosť. Podľa týchto dát zobrazuje priebeh operácie.

Podpora

Klient bude potrebovať internetový prehliadač s podporou AJAX-u. Pre komunikáciu som zvolil XML. Podporu týchto technológii nájdeme vo väčšine prehliadačov.

Server musí klientovi vedieť poskytnúť informácie o prenose. To sa dá realizovať niekoľkými spôsobmi (patch PHP, APC …). Ja som zvolil pre ukážku realizácie APC. Aby rozšírenie APC mohlo poskytnúť informácie o prenose musí byť povolená podpora rfc1867 (premenná apc.rfc1867="1" v konfiguračnom súbore).

Klientská časť

Formuláru na odosielanie súborov pribudne jedno pole s identifikátorom súboru navyše. Ako identifikátor súboru môžeme použiť pseudonáhodné číslo (podstatné je aby nedochádzalo ku kolíziám). Názov poľa musí byť rovnaký ako hodnota apc.rfc1867_name.

<input type="hidden" name="<?= ini_get('apc.rfc1867_name'); ?>" value="<?= rand(); ?>" />

Serverová časť

O presun súboru sa bude podobne, ako v predchádzajúcom prípade starať skript upload.php. Nie je potrebné urobiť v ňom žiadne dodatočné zmeny. Pribudne tu ale skript pre zisťovanie stavu prenosu (status.php).

Stav sa zisťuje preriodickými dotazmi klienta. V dotaze musí byť identifikátor súboru (v našom prípade vygenerované náhodné číslo). Identifikátor je možné odoslať vo forme GET, alebo POST dát.

if (!isset($_POST['fid']))
{
  die();
}

$fid = $_POST['fid'];

$status = apc_fetch(ini_get('apc.rfc1867_prefix') . $fid);
if (!is_array($status))
{
  die();
}

header('Content-type: text/xml');
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n".
     "<status>".
       "<done>$status[done]</done>".
       "<total>$status[total]</total>".
       "<complete>$status[current]</complete>".
     "</status>";

Identifikátor súboru posielam z javascriptu v poli fid(fileId). Volaním apc_fetch sa dajú získať informácie o stave prenosu súboru. V prípade úspešného načítania stavu sa vygeneruje XML.

Javascript

Najväčšia časť kódu sa vykonáva u klienta. Pri písaní webových aplikácií využívajúcich javascript kladiem dôraz na to, aby fungovali aj u prehliadačov bez podpory / s vypnutým javascriptom.

Samotný HTML kód nie je vďaka javascriptu potrebné modifikovať. Obsluhu udalostí (atribúty on* u HTML značiek) je možné pridať aj dynamicky javascriptom.

function addEvent(object, event, func)
{
  if(window.addEventListener)
  {
    object.addEventListener(event, func, false);
  }
  else
  {
    object.attachEvent('on'+event, func);
  }
}

var onLoad = function(e)
{
…
}

addEvent(document.body, 'load', onLoad);

Tento príklad pridá obsluhu udalosti load celého dokumentu (body). Obslužnou rutinou je funkcia onLoad.

Niektorých čitateľov by mohla zlákať udalosť formulára submit. Kód využívajúci udalosť submit nie je spoľahlivý pri odosielaní súborov. Niektoré internetové prehliadače majú z bezpečnostných dôvodov zakázané použitie udalosti submit pri uploade. Riešením je odchytenie udalosti click na tlačítkach s typom submit. Táto udalosť sa generuje aj pri odoslaní formulára bez kliknutia na odosielacie tlačítko.

var forms = document.getElementsByTagName('form');
for (var i = 0; i < forms.length; ++i)
{
  var inputs = forms[i].getElementsByTagName('input');
  for (var j = 0; j < inputs.length; ++j)
  {
    if (inputs[j].type == 'submit')
    {
      addEvent(inputs[j], 'click', function(e) {…});
    }
  }
}

Ďalším obmedzením, s ktorým sa stretneme je nemožnosť komunikácie so serverom počas načítavania stránky. Jediným rozumným spôsobom ako to obísť je vytvorenie rámca (iframe), v ktorom sa bude načítavať stránka, na ktorú odosielame súbor. Formulár má atribút target, ktorý určuje ID rámca / okna, v ktorom sa načíta stránka.

✓ Výhody

• Funguje okamžite vo väčšine prehliadačov

✗ Nevýhody

• Prenos prebytočných dát
• Nutnosť konfigurácie serveru
• Množstvo kódu v javascript-e

Na mojom webe som umiestnil kompletný popisovaný príklad.

Upload súboru v Konquerore

Upload súboru v Opere. Všimnite si zobrazovanie priebehu v statusbare. Chýba tu však informácia o celkovej veľkosti prenášaných dát.

Na tomto obrázku je priebeh načítavania dát o stave odosielania súboru. Záznam bol robený pri znížení rýchlosti prenosu užívateľa apache pomocou QoS. Pri pomalých linkách môže byť interval aktualizácie veľmi veľký (prípadne po prekročení timeoutu môže aktualizácia stavu úplne prestať fungovať).

Záver

Týmto blogom som chcel poukázať na spôsob riešenia problémov pri vývoji webu. Ako konkrétny príklad som použil progress bar pri uploade súborov. Prakticky všetky tieto progress bar-y fungujú na rovnakom princípe, ako som popisoval.

Tento problém sa dá riešiť výrazne rýchlejšie s použitím javascript-ových toolkit-ov. Ja patrím medzi používateľov, ktorí neveria obrovskému množstvu „nepriestrelného“ kódu v javascripte. Preto sa radšej vyriešim problém vlastnými silami. Ak poznáte implementáciu môžete objektívne posúdiť jej nasadenie / nenasadenie v praxi.

Situácia okolo uploadu je zlá z niekoľkých dôvodov:

• Programátori prehliadačov implementujú všetko možné, len tak základnú vec nie
• Programátori webov netlačia na vývojárov prehliadačov
• Užívateľom je to jedno

Ak na tom chcete niečo zmeniť hlasujte za upload progress bar. Používateľom prehliadača Konqueror dávam do pozornosti bug #11037. Zaujímavé riešenie je na tomto videu.

       

Obrázky

Komentáře

[9002]

Mna trapi upload viacerych suborov naraz...

[mirec]

To nie je problém pokiaľ nejde o adresár. Pridať nové políčko do formulára pomocou javascriptu povedzme po kliknutí na uploadnúť viacej súborov nie je problém. Žiaľ celý adresár je možné uploadovať len v zabalenej forme.

[Let_Me_Be]

IMHO myslel dialog ktery umoznuje vyber vic souboru. Kdyz chci nahodit 30 fotek, tak otevirat jeden soubor za druhym je humus.

[mirec]

No dá sa to riešiť tak, že sa všetko pošle zabalené (povedzme ako zip) a server si to rozbalí. Síce stále to nie je moc pohodlné pretože užívateľ musí ručne baliť, ale je to rýchlejšie než po jednom súbore vyberať. A podpora archívov už nie je tak zriedkavá u serverov s fotkami.

[default]

V Safari tohle nějak funguje. Když si nahrávám fotky do MobileMe Gallery, tak si můžu v tom dialogu naráz vybrat víc souborů. Ale jak to funguje — to se mě neptejte. A pak je tam nějaká (asi AJAXová) záležitost, která to pod tlakem protlačí na server. I s progressbarem.

[Let_Me_Be]

Flash

[default]

Asi jo. Ale ten dialog na výběr souboru — ten asi ve Flashi nebude. Je to totiž standardní dialog pro výběr souboru. Ale asi tam bude nějaký hack, jak mu dovolit vybrat víc souborů.

[Let_Me_Be]

Flash muze otevrit dialog pro vyber vice souboru, jelikoz to je normalni program, ktery bezi v systemu.

[Václav HFechs Švirga]

Ještě jsem něco takového viděl v javě... ale tam by ten filedialog vypadal tak nějak... javovsky :P.

[default]

Je to Flash. Otevřel jsem to ve Firefoxu a tam to dohledal.

[Hansik]

Jmenuje se to JUpload (http://jupload.sourceforge.net/). Da se to celkem lehce pouzivat (jsou tam dema). Je to pod GPL. Exituje i nejaka vic "vymakana" ale komercni verze http://www.jupload.biz/

[VRtulnikk]

JJ, také používám řešení založené na Flexu... myslím, že to je menší zlo, než přidávat soubory po jednom.

[Messa]

Co takhle mít možnost posílat soubory e-mailem? Perfektní třeba pro mobilní zařízení, kde s Flashem ani Javou moc parády nenaděláte...

[VRtulnikk]

Používám to pouze v backendu aplikací, kam se připojuje úzká množina lidí a rozhodně ne z mobilních zařízení :). Na frontendu jsem ještě takovouto potřebu neměl, nicméně mailem by to urřčitě řešit slo také ;)

[pozortucnak]

No možná by to nemusel být tak velký problém...

Firefox i opera jsou schopni zobrazit obsah složky jako html stránku, v exploreru by to také určitě nějak šlo, jenom co se týče konqueroru, mě nic nenapadá...

[Messa]

Ty (jako tvůrce webu) na ten obsah složky ale nesmíš moct sahat, jinak by to bylo bezpečnostní riziko.

[pozortucnak]

Nejde o to na obsah složky sahat, ale o to zjistit co v té složce je...

[mirec]

Aj výpis adresára je citlivá informácia. Ak by input mal atribút multiple, kde by užívateľ vybral zoznam súborov bolo by to o inom.

[l4m4]

Užívateľom je to jedno.

Jetliže je to všem jedno, tak situace není zlá, naopak je vše v pohodě.

[mirec]

Problém: užívatelia ani netušia čo všetko sa deje preto, aby sa im zobrazil progressbar. Proste tlačia len na tých, ktorí robia weby. To, že by to mal vedieť samotný prehliadač ich nezaujíma (proste typické lamy).

[CEST]

Obcas se mi stava, ze se nejaka stranka nacitava a zobrazuje postupne, jak prichazeji data. Netusim, jestli to tak funguje normalne nebo je to nejaka extended-feature HTTP nebo ceho, ale nedalo by se to pripadne taky pouzit spis nez AJAX?

Napr. neco jako

<html><body>
<?php

for ($i=0;$i<10;$i++) {
  echo "Progress $i<br/>\n";
  flush();
  sleep(1);
}

?>
</body></html>

Ale nevim, jestli Apache dava rizeni PHP uz behem posilani nebo az po dokonceni posilani souboru.

[mirec]

Skript sa spustí až po uploadnutí všetkých dát. A to, že sa stránka zobrazuje postupne je úplne normálne (HTML kód sa dá zobrazovať už počas jeho načítavania).

[Messa]

Pokud Apache (ani žádná proxy po cestě) není nastavené na bufferování výstupu, pak je normální, že po flush() se všechno, co je už k dispozici, odešle uživateli. Ale PHP kód dostane řízení až po přijmutí celého požadavku.

[Kvakor]

Ano, s uploadem přes HTTP jsou problémy. Mimo problému s uploadem je tu ještě výše zmínený problém s posíláním více souborů naráz (popř. celého adresáře) a problém s velikostí souboru.

Problém více souborů naráz jse vyřešit relativně jednoduše dynamickým přidáním dalších vstupů typu file, ale z uživatelského hlediska je to dost nepraktické. Upload většího souboru, než je minimum z nastavení maximálního uploadu ve fomuláři, nastavení serveru (v PHP upload_max_filesize a post_max_size) a nastavení všech proxy po cestě (což může být i tak málo, jako 256KB), je horší problém, který se bohužel klasickými metodamy obejít nedá.

Pokud jsou naším cílem "obyčejní uživatelé" (tj. lamy), potom zbývají dvě možná řešení: upload přes Flash/Java applet a upload přes FTP.

S první variantou moc zkušeností nemám - Java applety potřebují být podepsané, aby mohly sahat na souborový systém, a u Flashe to také není nic jednoduchého (jeden flashista mi to kdysi vysvětloval, ale nějak mi to vypadlo z hlavy).

Naprotomu druhou variantu jsem už úspěšne použil, není moc složitá, ale vyžaduje podporu FTP serveru - ten musí být schopen dynamicky vytvářet uživatelské účty a být schopen se nějak domluvit s webserverem. Já použil ProFTPd a chrootované virualní uživatele s účty v MySQL tabulkce. Když někdo potřebuje nahrát velký soubor, je pro něj vytvořen dočasný FTP účet (ze kterého nemůže ven, a může tam je nahrávat soubory, nic víc), který je po dokončení uploadu zrušen.

Uživately je poskytrnuto uživatelské jméno a heslo (oboje generované), navíc má ve stránce odkaz ftp://uzivatel:heslo@ftp.domena.cz, kterým se muže přímo dostat na FTP. Díky tomu mohou "obyčejní uživatelé" použít drag'n'drop a vesele si přetahají požadované soubory do cílového okna, ti zkušení mohou použít svého oblíbeného FTP klienta, nebo si FTP účet pripojit jako součást souborového systému. Po ukončení přenosu si uživatel zatrhne ve výpisu souborů ty, které opravdu chce naimportovat, zbytek je spolu s uživatelským účtem smazán (to se stane automaticky i po určitém časovém intervalu).

Tato metoda je sice takový neelegantní kočkopes (napůl HTTP, napůl FTP), ale má několik výhod:

1. Není omezená velikost ani počet souborů, teoreticky jdou přenášet i celé adresáře
2. FTP klienti mají progressbary, dokonce i tupý Průzkumník ve Windows (tem má sice jen "létající papírky", ale alespoň něco)
3. Pokročilí uživatelé mohou použít svéjo oblíbeného FTP klienta, není jim nucen prohlížeč
4. Skoro všechno se dělá na straně serveru, není třeba složitější prohlížeč než třeba textový Lynx, všechno je čisté HTML

Nevýhody:

1. Je třeba ovládat FTP účty, takže to není použitelné na běžných komečnich hostinzích. Je to spíše řešení pro serverhosting nebo vlastní server. FTP démon musí být navíc dobře nakonfigurovaný - chroot je nutnost, měly by být nastavené kvóty, vhodné je také omezit použitelné FTP příkazy (např. nemožnost nahrané soubory stáhnou zpět nebo smazat, nemožnost vytvářet adresáře ...).
2. FTP není bezpečné, natož posílání hesel k němu přes HTTP protokol. I když jsou uživatelské účty generované a dočasné, je možné je teoreticky zneužít. Řešením je HTTPS a FTPS, ale jen tehdy, když je jisté, že bude ze strany klienta podporováno. V opačném případě lze ještě použít šifrování samotných souborů a jejich automatické dešifrování po nahrátí.
3. Pro uživatele je to poněkud nezvyklé, ale většina to pochopila bez větších problémů (nikdo nám nenahrával zástupce ).
4. Většina prohlížečů umi z FTP jen číst, ale nebývá problém nastavit je na používaní jiného FTP klienta (MS IE třeba defaultné používá Průzkumníka).

[Václav HFechs Švirga]

Zajímavé řešení.

[Abraxis]

Pro upload adresaru apod. pouzivam k naproste spokojenosti v kombinaci s PHPkem toto:

http://jupload.sourceforge.net/

 

[mirec]

Ach java, nie práve najlepšie riešenie. To fakt radšej povoliť upload archívov.

[Filip Jirsák]

Zajímavé řešení. Jak je to s podporou FTP uploadu v různých prohlížečích? Když se k tomu dostane uživatel Opery, Firefoxu, Konqueroru, zvládne tam ty soubory intuitivně nahrát? Mne osobně by třeba použití drag-and-drop asi nenapadlo, a kdyby ano, přemýšlel bych, odkud ty soubory v Linuxu vůbec můžu tahat – z příkazové řádky asi těžko Mají ty prohlížeče nějakou jinou podporu, třeba přes pravé tlačítko akci „nahrát soubory“, kde by se objevil standardní otevírací dialog? Předpokládám, že jste to zkoušel…

[Kvakor]

Prohlížeče mimo MS IE FTP podproují, ale většinou jen read-only, což v mojem případě nevadilo, protože hlavní byla podpora "obyčejných uživatelů" s MS IE (kde se FTP dělá přes Průzkumníka). V ostaních prohlížečích to jde také nastavit na externího FTP klienta (testoval jsem např. Firefox&Filedzilla), ale protože je na stránce mimo odkazu i server/login/heslo, pokročilejší uživatelé nejspíš použijí oblíbeného FTP klienta (já bych také nikdy negrag'n'dropoval). Na to pak opravdu stačí i příkazová řádka a Lynx (osobně jsem to testoval), jediná výhoda grafického přostředí (včetně xterminálů) je možnost Copy&Paste loginů a hesel.

[mirec]

Znie trochu ako delo na komára ... ale pri troche snahy a pri integrácii do apacha by to mohol byť zaujímavý projekt.

[Senior Database Programmer]

Pohodlne sa to da riesit java appletom alebo flashom. Kto nema rad javu a flash nech si uploaduje subory po jednom, lebo ine riesenie momentalne nieje...

 

 

[cuba.g]

Ještě pro upload více souborů lze použít SwfUpload. Celkem dobře se s tím pracuje, ale je nutný flash. Viz. swfupload.org/