Legg merke til at den uordnede listen med id-filene er tom. Ikke bekymre deg for det akkurat nå, da vi vil fylle den delen med filene på serveren.

Trinn 3 - Legg til CSS og JS

Jeg brukte jQuery til å skape muligheten til å bytte synlighet til bestemte filtyper uten å måtte oppdatere siden.
Dette er rent valgfritt, og fjerning av JS vil øke hastigheten på sidenes innlasting noe. Så la oss legge til følgende linjer i HEADEN til HTML-filen.

Jeg laster jQuery fra en ekstern kilde ved kjøring. Igjen hvis du foretrekker det, kan du endre dette slik at filen lastes fra en lokal kilde med denne linjen.

Laster filen direkte fra code.jquery.com sikrer at vi bruker den nyeste versjonen og sparer båndbredden på hver sidebelastning, men hvis code.jquery.com-serveren skulle være ned eller overfylt, kan vi ikke få filen når vi trenger det.

Opprett en ny mappe som heter stil og opprett en ny CSS-fil i den med navnet style.css. Dette blir filen som forteller nettleseren hvordan vi vil at siden skal se ut. Det er ganske mye CSS her, men det er enkelt nok for alle å følge.

Nå skal siden se ut som følgende.

 @CHARSET "ISO-8859-1"; kropp bakgrunnsfarge: #cddcec; font-familie: "Arial"; skriftstørrelse: 11px;  div # container bredde: 600px; margin: 0px auto; grense: 1px solid # e6eef6; bakgrunnsfarge: #ffffff;  div # container h1 bakgrunnsfarge: # 4b75b3; margin: 0px; polstring: 8px; font-familie: "Arial"; font-weight: normal; grense: 1px solid # 3564a9;  div # containerfelt margin: 20px; grense: 1px solid # 98b9d0;  ul # meny listestil-type: none; margin: 4px; polstring: 0px;  ul # meny li float: left; margin: 4px;  ul # meny li.active bakgrunnsfarge: # 98b9d0; border-left: 1px solid # 3564a9; border-top: 1px solid # 3564a9; grensebunn: 1px solid # e6eef6; grense-høyre: 1px solid # e6eef6;  ul # meny li a text-decoration: none; skriftstørrelse: 10px; polstring: 2px; farge: # 3564a9;  ul # filer liste-stil-type: none; margin: 40px 0px 0px 0px; polstring: 0px;  ul # filer li bakgrunnsfarge: # fff7c0; border-bottom: 1px solid #efefef; polstring: 2px; margin-bunn: 1px; 

Det vi bør nå har, er illustrert i det følgende bildet.

Trinn 4 - Håndtering av filinngangsposisjoner med PHP

La oss starte PHP-siden av opplæringen ved å lage en Innstillinger-klasse. I denne klassen kan vi lagre opplastingspassordet samt filbanen for opplastingsmappen.
Vi kan da ta klassen inn i vår side og bruke verdiene når det trengs.
Du kan skrive PHP-filer med stort sett de samme verktøyene du bruker til å skrive HTML og CSS, bare husk å lagre filen med .php-suffikset.

Uten å gå noe dypere inn i Objektorientert Programmering (OOP), hva koden gjør er det skaper en ny klasse med de slags verdier som kan nås uten å instansiere klassen.
Vi kan nå få tilgang til verdiene ved å ringe Innstillinger :: $ password; og Innstillinger :: $ uploadFolder; Dette er også stedet der du kan endre passordet når du vil.
De Merk begynnelsen og slutten av et PHP-kodesegment. Disse segmentene kan skrives på vanlige HTML-sider, og serveren tolker dem når siden blir bedt om.

Ok, nå kommer vi til forretninger. I html-filen vi har jobbet med, la vi legge til følgende i toppen av filen. Ja, før stikkord.

  
Først forteller vi PHP-tolken å inkludere vår innstillingsfil. Jeg har også opprettet en ny variabel $ melding. Senere skal jeg skrive prosessinformasjon i denne variabelen og vise den til brukeren.
 
 // Har brukeren lastet opp noe? hvis (isset ($ _ FILES ['file'])) 
 
Hvis skjemaet er sendt inn med en fil, skal $ _FILE-oppsettet ha en verdi med nøkkelen vi brukte som navnet på filinntastingsfeltet.
 
 $ target_path = Innstillinger :: $ uploadFolder; $ target_path = $ target_path. tid() . '_'. basenavn ($ _FILES ['fil'] ['navn']);
 
Her får vi banen til opplastingsmappen vi angav i innstillingene. På linje 2 legger vi til (sammenkalle) navnet på den opplastede filen i målbanen.
Legg også merke til at jeg har lagt til dagens serverstedsstempel i begynnelsen av filnavnet. Det er to grunner for meg å gjøre dette.
Først er det vant til å lagre datoen, og det andre vil sørge for at alle filene har forskjellige navn.
Skulle vi bruke en database bak denne applikasjonen, ville tidspunktet for å legge til være der, og vi kunne serialisere filnavnene og lagre det opprinnelige navnet bare i databasetabellen,
men da det ikke finnes noen database, kan vi bare bruke denne løsningen.
 
 // Sjekk passordet for å bekrefte lovlig opplasting hvis ($ _ POST ['passord']! = Innstillinger :: $ passord) $ message = "Ugyldig passord!";  annet 
 
Hvis innleveringen ble gjort uten å gi noe passord, eller hvis det oppgitte passordet var noe annet enn det som ble definert i innstillingene, vil vi ikke håndtere filen og bare returnere en melding som angir et falsk passord.
 
 // Prøv å flytte den opplastede filen til den angitte mappen hvis (move_uploaded_file ($ _ FILES ['file'] ['tmp_name'], $ target_path)) $ message = "Filen". basenavn ($ _FILES ['fil'] ['navn']). "har blitt lastet opp";  else $ message = "Det oppstod en feil under opplasting av filen, prøv igjen!"; 
 
Ok, så passordet var riktig, nå hva? Nå lagrer vi filen. Jeg sier lagre i parentes siden filen faktisk er allerede i serveren; det er bare i den midlertidige mappen.
For å gjøre filen tilgjengelig og for å sikre at serveren ikke vil slette den når tempen er slettet, må vi flytte den til et sikkert sted. Jeg har brukt funksjonen move_uploaded_file.
Funksjonen tar to argumenter. Først er det midlertidige navnet på filen tildelt automatisk av serveren, og den andre er målbanen vi tildelte tidligere.
Funksjonen returnerer en boolsk verdi som indikerer en vellykket operasjon. Igjen setter vi meldingsverdien for å informere brukeren om hva som skjedde.
 
 hvis (strlen ($ melding)> 0) $ message = '
'. $ melding. '
'; 
 
Og det er så enkelt det er å laste opp filer til server med PHP! Her har jeg nettopp sjekket om noe har blitt skrevet inn i meldingsvariabelen (lengde mer enn 0) og format det slik at vi kan stile det med CSS.
 
Trinn 5 - Oppgi opplastede filer
 
 / ** LIST UPLOADED FILES ** / $ uploaded_files = ""; // Åpne katalog for å lese $ dh = opendir (Innstillinger :: $ uploadFolder);
 
Det første du må gjøre er å lage et mappehåndtak. Alt som trengs er en kommando. Den variable uploaded_files er hvor vi skal skrive mappens filnavn i HTML-format.
 
 // LOOP gjennom filene mens (($ file = readdir ($ dh))! == false) 
 
Her løp vi gjennom filene i mappen. Så lenge vi kan lese den neste filen i mappen i filvariabelen, gjør vi det og fortsetter. Når vi har gått gjennom alle filene, returnerer funksjonen falsk og avslutter sløyfen.
 
 hvis ($ file! = '.' && $ file! = '...') 
 
'.' og '...' returneres også av denne funksjonen, så vi må sørge for at vi ikke forsøker å gjøre noe med dem.
 
 $ filename = Innstillinger :: $ uploadFolder. $ Fil; $ parts = explode ("_", $ file);
 
Vi legger til navnet på filen i banen til opplastingsmappen og lagrer den som filnavnvariabel. Da eksploderer vi navnet på filen ved '_'-tegnet.
Denne funksjonen returnerer en rekke strenger som deler den opprinnelige strengen hver gang det er en '_'.
Siden det er ett av disse tegnene, mottar vi en matrise med tidsstempeldelen som celle 1 og det opprinnelige filnavnet som celle 2.
 
 $ size = formatBytes (filstørrelse ($ filnavn)); $ added = date ("m / d / y", $ deler [0]); $ origName = $ deler [1];
 
Nå som vi har tidsstempelverdien som egen streng, kan vi formatere den til en dato og lagre det opprinnelige filnavnet som det er egen variabel.
Filstørrelsesfunksjonen som tilbys av PHP, returnerer bare størrelsen på filen i byte, så vi formaterer den til en mer lesbar form med formatBytes-funksjonen, som er dekket i en bit.
 
 $ filetype = getFileType (substr ($ file, strlen ($ file) - 3)); $ uploaded_files. = "
$ origName $ size - $ added
\ N ";
 
Når du laster opp en fil i serveren, gir PHP oss informasjon om filtype, men siden vi ikke har noe sted å lagre den informasjonen, må vi prøve å få filtypen med en egendefinert funksjon.
Jeg gir de tre siste tegnene til filnavnet som en parameter til getFileType-funksjonen (vist senere). Jeg bruker filetype-variabelen til å formatere de forskjellige filene med CSS.
Alt som er igjen, er å generere en HTML-streng og legge den til i uploaded_files-variabelen, og lukk mappenhåndtaket.
 
  closedir ($ dh);
 
 hvis (strlen ($ uploaded_files) == 0) $ uploaded_files = "
Ingen filer funnet
";
 
Hvis ingen filer ble funnet, sett de opplastede filene var for å vise en melding.
 
Vi må også vise uploaded_files-strengen et sted; så legg til denne linjen inne i 
 med id-filene.
 
 
 
Trinn 6 - Hjelpefunksjon
 
GetFileType-funksjonen prøver å gjette hvilken type filen er ved å lese de siste tegnene i navnet. Dette vil ikke fungere med utvidelser som .jpeg og .tiff.
For å gjøre det mer universelt, må vi lese en substring som starter i perioden og går til slutten av filnavnet.
Men så hvis navnet er noe som my.new.car.pic, vil vi få new.car.pic som utvidelsene.
For å få dette til å fungere, må vi finne siste periode i navnet og ta en substring derfra.
Men for omfanget av denne opplæringen er dette nært nok.
 
 funksjon getFileType ($ extension) $ images = array ('jpg', 'gif', 'png', 'bmp'); $ docs = array ('txt', 'rtf', 'doc'); $ apps = array ('zip', 'rar', 'exe'); hvis (in_array ($ extension, $ images)) returnerer "Images"; hvis (in_array ($ extension, $ docs)) returnere "Dokumenter"; hvis (in_array ($ extension, $ apps)) returnere "Applications"; komme tilbake ""; 
 
Denne neste funksjonen formaterer bytes til et mer lesbart format. Bare grunnleggende matte - ingenting mer. Funksjonen i seg selv er fra PHP.net-funksjonens kommentarer. 
 
 funksjonsformatBytes ($ bytes, $ precision = 2) $ units = array ('B', 'KB', 'MB', 'GB', 'TB'); $ bytes = max ($ byte, 0); $ pow = gulv (($ bytes? log ($ bytes): 0) / logg (1024)); $ pow = min ($ pow, count ($ units) - 1); $ bytes / = pow (1024, $ pow); returrunde ($ bytes, $ presisjon). ". $ enheter [$ pow];?>
 
Og det er det for PHP-delen. Bare noen flere JS og CSS, og vi er alle ferdige.
 
Trinn 7 - En berøring av CSS for økt lesbarhet
 
Det vi har så langt skal se ut som:
  
Men for å gjøre god bruk av getFileType-funksjonen og klassenavnet det returnerer, har jeg lagt til de neste linjene CSS i style.css-filen.
 
 ul # files li a text-decoration: none; farge: # 3564a9; polstring: 2px 25px; bakgrunnsposisjon: venstre; bakgrunn-gjentak: ikke-gjenta;  ul # filer li.Documents a bakgrunnsbilde: url ('... /images/text.jpg');  ul # filer li.Images en bakgrunnsbilde: url ('... /images/picture.jpg');  ul # filer li.Applications a bakgrunnsbilde: url ('... /images/zip.jpg');  p.error bakgrunnsfarge: # fff7c0; border-bottom: 1px solid #efefef; font-weight: bold; farge: # ff0000; polstring: 6px; 
 
Jeg tilordner et ikon til hver type fil. Ikonet jeg har brukt er fra den fantastiske samlingen på http://www.famfamfam.com.
Nå skal vi ha noe slikt.
  
Ah, mye bedre.
 
Trinn 8 - Skift filsikkerhet med jQuery
 
For en sluttbit, la oss legge til ekstra funksjonalitet med JavaScript. Opprett en ny mappe kalt "js" og i den mappen lage en ny fil, filestorage.js.
Legg deretter til følgende linje til slutten av HTML-siden rett før  stikkord.