Observera att den oordnade listan med id-filerna är tom. Oroa dig inte om det just nu när vi kommer att fylla den sektionen med filerna på servern.

Steg 3 - Lägg till CSS och JS

Jag använde jQuery för att skapa möjligheten att skifta synligheten för vissa filtyper utan att behöva uppdatera sidan.
Detta är rent valfritt och borttagning av JS kommer att påskynda sidans laddning något. Så låt oss lägga till följande rader i HEADEN i HTML-filen.

Jag laddar jQuery från en extern källa vid körning. Återigen om du föredrar kan du ändra detta så att filen laddas från en lokal källa med den här raden.

Laddar filen direkt från code.jquery.com säkerställer att vi använder den senaste versionen och sparar vår bandbredd på varje sida, men om serveren code.jquery.com skulle vara nere eller överfyllda kan vi inte få filen när vi behöver det.

Skapa en ny mapp som heter stil och skapa en ny CSS-fil i den med namnet style.css. Det här är filen som berättar för webbläsaren hur vi vill att sidan ska se ut. Det finns en hel del CSS här, men det är enkelt att någon ska följa.

Nu ska sidan se något som följande.

 @CHARSET "ISO-8859-1"; kropp bakgrundsfärg: #cddcec; font-family: "Arial"; typsnittstorlek: 11px;  div # container width: 600px; marginal: 0px auto; gräns: 1px fast # e6eef6; bakgrundsfärg: #ffffff;  div # container h1 bakgrundsfärg: # 4b75b3; marginal: 0px; vaddering: 8px; font-family: "Arial"; typsnitt: normal; gränsen: 1px fast # 3564a9;  div # containerfältet margin: 20px; gräns: 1px fast # 98b9d0;  ul # meny list-style-type: none; marginal: 4px; vaddering: 0px;  ul # meny li float: left; marginal: 4px;  ul # meny li.active bakgrundsfärg: # 98b9d0; gränsen-vänster: 1px fast # 3564a9; border-top: 1px solid # 3564a9; border-bottom: 1px solid # e6eef6; gränsen-höger: 1px solid # e6eef6;  ul # meny li a text-decoration: none; typsnittstorlek: 10px; vaddering: 2px; färg: # 3564a9;  ul # files list-style-type: none; marginal: 40px 0px 0px 0px; vaddering: 0px;  ul # filer li bakgrundsfärg: # fff7c0; border-bottom: 1px solid #efefef; vaddering: 2px; marginal-botten: 1px; 

Det som vi borde nu har illustreras i följande bild.

Steg 4 - Hantering av filinsignaler med PHP

Låt oss börja PHP-sidan av handledningen genom att skapa en inställningsklass. I den här klassen kan vi spara uppladdningslösenordet samt filvägen för uppladdningsmappen.
Vi kan sedan inkludera klassen i vår sida och använda dess värden när det behövs.
Du kan skriva PHP-filer med ganska mycket samma verktyg som du använder för att skriva HTML och CSS, bara kom ihåg att spara filen med .php-suffixet.

Utan att gå längre in i Objektorienterad Programmering (OOP), vad koden gör är det skapar en ny klass med vilken typ av värderingar som kan nås utan att klassificera klassen.
Vi kan nu komma åt dess värden genom att bara ringa Inställningar :: $ lösenord; och inställningar :: $ uploadFolder; Det här är också platsen där du kan ändra lösenordet när du vill.
De markera början och slutet på ett PHP-kodsegment. Dessa segment kan skrivas på vanliga html-sidor och servern tolkar dem när sidan begärs.

Ok, nu kommer vi till affärer. I den html-fil vi har jobbat med, låt oss lägga till följande längst upp i filen. Ja, före märka.

  
Först berättar vi PHP tolken att inkludera vår inställningsfil. Jag har också skapat ett nytt variabelt $ meddelande. Senare ska jag skriva processinformation i denna variabel och visa den till användaren.
 
 // Har användaren laddat upp något? om (isset ($ _ FILES ['file'])) 
 
Om formuläret har skickats in med en fil, bör arrayen $ _FILE ha ett värde med den nyckel som vi använde som namnet på filinmatningsfältet.
 
 $ target_path = Inställningar :: $ uploadFolder; $ target_path = $ target_path. tid (). '_'. basnamn ($ _FILES ['file'] ['name']);
 
Här får vi sökvägen till den uppladdningsmapp som vi angav i inställningarna. På rad 2 lägger vi till (sammandrag) namnet på den uppladdade filen i målvägen.
Observera också att jag har lagt till den aktuella serverns tidsstämpel i början av filnamnet. Det finns två skäl till att jag gör det här.
Först används det för att lagra datumet och det andra kommer att se till att alla filer har olika namn.
Om vi ​​använder en databas bakom den här applikationen skulle tiden för tillägg vara där, och vi kunde serialisera filnamnen och spara det ursprungliga namnet endast i databastabellen,
men eftersom det inte finns någon databas kan vi bara använda den här lösningen.
 
 // Kontrollera lösenordet för att verifiera laglig uppladdning om ($ _ POST ['password']! = Inställningar :: $ lösenord) $ message = "Ogiltigt lösenord!";  annat 
 
Om inlämningen gjordes utan att ge något lösenord eller om det angivna lösenordet var något annat än det som definierades i inställningarna, hanterar vi inte filen och returnerar bara ett meddelande som anger ett felaktigt lösenord.
 
 // Försök flytta den uppladdade filen till den angivna mappen om (move_uploaded_file ($ _ FILES ['file'] ['tmp_name'], $ target_path)) $ message = "Filen". basnamn ($ _FILES ['fil'] ['namn']). "har laddats upp";  else $ message = "Det uppstod ett fel att ladda upp filen, var god försök igen!"; 
 
Ok, så lösenordet var rätt, nu vad? Nu sparar vi "filen". Jag säger att det inte finns några parentes eftersom filen faktiskt redan finns i servern. Det är bara i den tillfälliga mappen.
Så för att göra filen tillgänglig och för att försäkra servern om att inte radera den när tempen raderas måste vi flytta den till en säker plats. Jag har använt move_uploaded_file-funktionen.
Funktionen tar två argument. Först är det temporära namnet på filen som tilldelas automatiskt av servern, och den andra är den målväg vi tilldelade tidigare.
Funktionen returnerar ett booleskt värde som indikerar en lyckad operation. Återigen sätter vi meddelandevärdet för att informera användaren om vad som hände.
 
 om (strlen ($ message)> 0) $ message = '
'. $ meddelande. '
'; 
 
Och det är så enkelt att ladda upp filer till servern med PHP! Här har jag bara kontrollerat om något har skrivits in i meddelandevariabeln (längd mer än 0) och formatera det så att vi kan stile det med CSS.
 
Steg 5 - Lista de uppladdade filerna
 
 / ** LIST UPLOADED FILES ** / $ uploaded_files = ""; // Öppna katalog för att läsa $ dh = opendir (Inställningar :: $ uploadFolder);
 
Det första du behöver göra är att skapa ett mapphandtag. Allt som krävs är ett kommando. Den variabla uploaded_files är där vi skriver mappens filnamn i HTML-format.
 
 // LOOP genom filerna medan (($ file = readdir ($ dh))! == false) 
 
Här gick vi igenom filerna i mappen. Så länge vi kan läsa nästa fil i mappen i filvariabeln gör vi det och fortsätter. När vi har gått igenom alla filerna returneras funktionen falsk och avslutar slingan.
 
 om ($ file! = '.' && $ file! = '...') 
 
'.' och "..." returneras också av den här funktionen, så vi måste se till att vi inte försöker göra någonting med dem.
 
 $ filename = Inställningar :: $ uploadFolder. $ File; $ parts = explodera ("_", $ file);
 
Vi lägger till namnet på filen i sökvägen till uppladdningsmappen och sparar den som filnamnvariabel. Då exploderar vi namnet på filen med '_' tecknet.
Denna funktion returnerar en rad strängar som delar upp den ursprungliga strängen varje gång det finns en "_".
Eftersom det finns en av dessa tecken får vi en array med tidsstämpeldelen som cell 1 och det ursprungliga filnamnet som cell 2.
 
 $ size = formatBytes (filstorlek ($ filnamn)); $ added = date ("m / d / y", $ delar [0]); $ origName = $ delar [1];
 
Nu när vi har tidsstämpelvärdet som egen sträng, kan vi formatera det till ett datum och spara det ursprungliga filnamnet eftersom det är egen variabel.
Filformatfunktionen som tillhandahålls av PHP återger bara storleken på filen i byte, så vi formaterar den till en mer läsbar form med formatBytes-funktionen, som är täckt av en bit.
 
 $ filetype = getFileType (substr ($ file, strlen ($ file) - 3)); $ uploaded_files. = "
$ origName $ size - $ added
\ N ";
 
När vi lägger upp en fil i servern tillhandahåller PHP oss filtypsinformationen, men eftersom vi inte har någon plats att lagra den informationen, måste vi försöka få filtypen med en anpassad funktion.
Jag ger de tre sista tecknen i filnamnet som en parameter till getFileType-funktionen (visas senare). Jag använder filtypvariablerna för att ställa in de olika filerna med CSS.
Allt som är kvar nu är att generera en HTML-sträng och lägga till den i variabelen uploaded_files och stänga mapphandtaget.
 
  closedir ($ dh);
 
 om (strlen ($ uploaded_files) == 0) $ uploaded_files = "
Inga filer funna
";
 
Om inga filer hittades, ställ de uppladdade filerna var för att visa ett meddelande.
 
Vi måste också visa strängen uploaded_files någonstans; så lägg till den här raden inuti 
 med id-filerna.
 
 
 
Steg 6 - Hjälpfunktion
 
Funktionen getFileType försöker gissa vilken typ filen är genom att läsa de sista tecknen i det namnet. Det här fungerar inte med tillägg som .jpeg och .tiff.
För att göra det mer universal måste vi läsa en substring som börjar vid perioden och går till slutet av filnamnet.
Men då om namnet är något som my.new.car.pic skulle vi få new.car.pic som tillägg.
För att göra detta verkligen arbete skulle vi behöva hitta sista period i namnet och ta en substring därifrån.
Men för omfattningen av denna handledning är det tillräckligt nära.
 
 funktion getFileType ($ extension) $ images = array ('jpg', 'gif', 'png', 'bmp'); $ docs = array ('txt', 'rtf', 'doc'); $ apps = array ('zip', 'rar', 'exe'); om (in_array ($ extension, $ images)) returnerar "Images"; om (in_array ($ extension, $ docs)) returnera "Documents"; om (in_array ($ extension, $ apps)) returnera "Applications"; lämna tillbaka ""; 
 
Den här nästa funktionen formaterar byte till ett mer läsbart format. Bara grundläggande matte - inget mer. Funktionen i sig är från PHP.net-funktionens kommentarer. 
 
 funktion formatBytes ($ bytes, $ precision = 2) $ units = array ('B', 'KB', 'MB', 'GB', 'TB'); $ bytes = max ($ byte, 0); $ pow = floor (($ bytes? log ($ bytes): 0) / logg (1024)); $ pow = min ($ pow, count ($ units) - 1); $ bytes / = pow (1024, $ pow); returrunda ($ bytes, $ precision). ". $ enheter [$ pow];?>
 
Och det är det för PHP-delen. Bara lite mer JS och CSS och vi är alla färdiga.
 
Steg 7 - En touch av CSS för ökad läsbarhet
 
Vad vi har här långt bör se ut:
  
Men för att göra god användning av getFileType-funktionen och klassnamnet returnerar, har jag lagt till följande rader av CSS i style.css-filen.
 
 ul # files li a text-decoration: none; färg: # 3564a9; vaddering: 2px 25px; Bakgrundsposition: vänster; background-repeat: no-repeat;  ul # filer li.Documents a background-image: url ('... /images/text.jpg');  ul # filer li.Images en background-image: url ('... /images/picture.jpg');  ul # filer li.Applications a background-image: url ('... /images/zip.jpg');  p.error bakgrundsfärg: # fff7c0; border-bottom: 1px solid #efefef; font-weight: bold; färg: # ff0000; vaddering: 6px; 
 
Jag tilldelar en ikon till varje typ av fil. Ikonen som jag har använt är från den magnifika samlingen som hittades på http://www.famfamfam.com.
Nu vad vi borde ha är något som detta.
  
Åh, mycket bättre.
 
Steg 8 - Byt filsynlighet med jQuery
 
För en avslutningsbit, låt oss lägga till lite extra funktionalitet med JavaScript. Skapa en ny mapp som heter "js" och i den mappen skapa en ny fil, filestorage.js.
Lägg sedan till följande rad till slutet av HTML-sidan direkt före  märka.