Roztomilý prohlížeč souborů s jQuery a PHP

Dnes se s vámi chceme podělit o skvělý experiment. Je to roztomilý prohlížeč souborů, který můžete nahrát do složky někde na vašem webu a sdílet dokumenty, obrázky a další soubory se světem. Aplikace je postavena na PHP a jQuery a široce využívá CSS3 – při návrhu nebyly použity žádné obrázky ani ikony a animace jsou plynulé a fungují dobře i na chytrých telefonech.

Jak jej používat na svém webu

Pokračujte a uchopte soubor zip z tlačítka stahování výše. Rozbalte jej a poté jej nahrajte na svůj server. Složka soubory je místo, kam byste měli umístit vše, co chcete sdílet. Není nutné žádné další nastavení – skript nepoužívá databázi a není potřeba žádná konfigurace.

Nápad

Pokud se chcete dozvědět více o tom, jak to funguje, zde je přehled funkcí na vysoké úrovni:

  • Skript PHP – scan.php - prohledá soubory složku a vrátí všechny soubory a složky jako jeden objekt JSON.
  • Náš kód JavaScript s pomocí jQuery přebírá tento JSON a mění jej na mřížku souborů a složek. Klepnutím na složku znovu vykreslíte pohled s jejím obsahem.

Protože existuje pouze jeden požadavek na backend, je procházení seznamu souborů a vyhledávání okamžité. Aktualizujeme také adresu URL a používáme událost hashchange ke sledování navigace pomocí tlačítek zpět/vpřed.

Zveme vás, abyste si s kódem pohráli – má spoustu komentářů a je relativně snadné jej sledovat.

Vynucení stahování souborů

Prohlížeče otevírají textové soubory místo jejich stahování. Pokud chcete vynutit stažení všech souborů, umístěte tento soubor .htaccess do souborů složka:

<Files *.*>
ForceType application/octet-stream
</Files>

Mělo by se jmenovat .htaccess (s úvodní tečkou). Tento soubor je podporován pouze na webových serverech Apache.

Design

PSD pro design je k dispozici zdarma všem našim odběratelům newsletteru! Připojte se nebo se přihlaste odtud a stáhněte si ji.

Doufáme, že pro vás bude náš správce souborů užitečný! Lze k němu přidat spoustu skvělých věcí, jako je procházení fotografií v okně lightbox, přehrávání zvuku a videa a dokonce jeho vylepšení pomocí funkcí správy souborů a nahrávání. Rádi bychom viděli, co vymyslíte!