Domovská » Sada nástrojů » Volný ES5 / ES6 JavaScript File Upload Plugin - Uppy

    Volný ES5 / ES6 JavaScript File Upload Plugin - Uppy

    Jedním z nejnáročnějších vstupů do designu je nahrání souboru. Má výchozí styl HTML, ale není to ta nejkrásnější věc na světě.

    Uppy bere upload souborů na zcela novou úroveň pomocí vlastní rozhraní a dynamický proces načítání ve stylu Ajax.

    To běží na ES5 / ES6 kódu, takže můžete vytvářet webové aplikace s nejnovějšími standardy JavaScriptu. A dokonce podporuje nahrávání souborů z úložišť typu cloud jako Dropbox nebo Disk Google, takže je to vícenásobný skript pro nahrávání souborů pro web.

    Uppy je zcela zdarma a open-source, s repo na GitHub. Nicméně, nejjednodušší způsob, jak nainstalovat tento plugin je přes npm nebo příze, takže můžete běžet jako skutečný balíček.

    Jakmile dostanete soubory přidané na vaše webové stránky, stačí zahrnout soubor Uppy.js a kód CSS. Pak se zaměříte na jakékoli vstupní pole, které chcete, a na zbytek se postará Uppy.

    Má jedinečné rozhraní, které vypadá jako jedno velké čtvercové umístění přetažení souborů. Můžete také vyberte položky z pevného disku nebo dokonce nahrávat soubory vzdáleně z externích adres URL. Docela šílené!

    Celý proces nastavení naleznete na stránce s dokumentací, ale to vyžaduje alespoň určité pochopení ECMAScript 6. Tato knihovna se zaměřuje na budoucnost skriptování a není to nejjednodušší věc s čistým JavaScriptem.

    Ale pokud jste vážně o vývoji webu, stojí za to se učit ES6 tak jako tak. Můžeš najít tun online pro sebevzdělávání a můžete použít i Uppy jako svůj první “nemovitý” se zapojit do projektu a začít se učit.

    Podívejte se na Příklad řídicího panelu viz Uppy v akci. Pro tuto stránku, upload je skryt za tlačítkem spouštěče, Kliknutím na toto tlačítko zobrazíte pole pro modální odesílání.

    Odtud můžete vybrat, zda chcete obrázek odeslat z počítače, z webu nebo dokonce z webové kamery!

    Stránka Příklady nabízí spoustu pohledů, včetně a přetáhněte příklad, spolu s internacionalizovaná demo stránka.

    Ale abych se opravdu naučil, jak to funguje, doporučuji skimming dokumentů a procházení hlavním repoem GitHub. Můžete také sdílet své myšlenky s tvůrci na Twitteru @ transloadit.