✅ HTML5 - Odesílání souborů

Obsah

Když máme formuláře pro sběr dat na jedné stránce HTML5 Kromě toho, že můžeme přijímat data pomocí polí typu vstupu, můžeme také nahrávat soubory, čímž můžeme urychlit načítání určitých dat, která nelze v textu vyjádřit, nebo se může jednat o velmi dlouhé texty, je obvyklé nahrát obrázek soubory nebo soubory PDF, protože tyto dva formáty jsou velmi populární, nicméně s Ajax můžeme nahrát téměř jakýkoli typ souboru.
Nahrát soubory
Na nahrajte soubory pomocí Ajaxu, musíme vytvořit pole typu souboru ve formuláři a v naší rutině Ajax použít předmět FormData pomocí kterého budeme shromažďovat data, abychom jim mohli poskytnout potřebný formát a nahrát náš soubor na server.
Objekt FormData musí se používat opatrně, protože stále mohou existovat verze prohlížečů, které jej plně nepodporují, nicméně je to docela solidní řešení.
Podívejme se v následujícím kódu, jak provést základní nahrání souboru:

 PříkladBanány:Jablka:Třešně:Soubor:Celkový:0 položekOdeslat formulář

Při zahrnutí vstupu typu souboru objekt FormData automaticky provede opatření tak, aby náš soubor mohl být nahrán na server, na následujícím obrázku vidíme, jak to interpretuje prohlížeč:

V tomto případě to byl docela lehký obrázek, takže doba nahrání souboru na server není patrná, ale pokud by to bylo 30 MB pdf, čas by byl mnohem delší, protože je to pro uživatele transparentní, mohl by si myslet, že stránka „nedělá nic“ nebo to bylo „myšlení“, abychom se tomu vyhnuli, můžeme začlenit ukazatel průběhu, pomocí kterého bude pokrok viditelný.
Abychom viděli průběh stoupání, použijeme objekt XMLHttpRequest k ověření stavu požadavku Ajax:

 PříkladBanány:Jablka:Třešně:Soubor:Pokrok:Celkový:0 položekOdeslat formulář

Definovali jsme prvek pokrok a s ním Objekt XMLHttpRequest Hodnoty můžeme přiřadit během nahrávání, v prohlížeči to můžeme vidět následovně:

ZVĚTŠIT

Můžeme použít Ajax Mnohem více než jen konzultační prvky na jiných stránkách můžeme také použít k vylepšení našich formulářů, pokud jde o zachycování dat.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod