Observați că lista neordonată cu fișierele id este goală. Nu vă faceți griji despre acest lucru acum, deoarece vom completa această secțiune cu fișierele de pe server.

Pasul 3 - Adăugați CSS și JS

Am folosit jQuery pentru a crea capacitatea de a comuta vizibilitatea anumitor tipuri de fișiere fără a fi nevoie să actualizați pagina.
Acest lucru este pur opțional și eliminarea JS va accelera încărcarea paginii într-o oarecare măsură. Deci, să adăugăm următoarele linii la HEAD a fișierului HTML.

Încărc jQuery de la o sursă externă în timpul rulării. Din nou, dacă preferați, puteți schimba acest lucru astfel încât fișierul să fie încărcat dintr-o sursă locală cu această linie.

Încărcarea fișierului direct de la code.jquery.com vă asigură că folosim cea mai recentă versiune și salvează lățimea de bandă la încărcarea fiecărei pagini, dar dacă serverul code.jquery.com se va întâmpla să fie în jos sau supraaglomerat, este posibil să nu primim fișierul când avem nevoie de ea.

Creați un folder nou numit stil și creați un nou fișier CSS în el cu numele style.css. Acesta va fi fișierul care îi spune browserului modul în care dorim ca pagina să pară. Există o mulțime de CSS aici, dar este destul de simplu ca oricine să-l urmeze.

Acum, pagina ar trebui să arate după cum urmează.

 @CHARSET "ISO-8859-1"; corp fundal-culoare: #cddcec; font-family: "Arial"; font-size: 11px;  div # container lățime: 600px; margine: 0 pixeli auto; frontieră: 1px solid # e6eef6; fundal-culoare: #ffffff;  div # container h1 background-color: # 4b75b3; margine: 0px; padding: 8px; font-family: "Arial"; font-weight: normal; frontieră: 1px solid # 3564a9;  div # set de câmp margine: 20px; frontieră: 1px solid # 98b9d0;  ul # meniu list-style-type: none; margine: 4px; padding: 0px;  ul # meniul li float: left; margine: 4px;  ul # meniu li.active fundal-culoare: # 98b9d0; frontieră stângă: 1px solid # 3564a9; frontieră-sus: 1px solid # 3564a9; frontieră-fund: 1px solid # e6eef6; frontieră-dreapta: 1px solid # e6eef6;  ul # meniul li a text-decoration: none; font-size: 10px; padding: 2px; culoare: # 3564a9;  ul # fișiere list-style-type: none; margine: 40px 0px 0px 0px; padding: 0px;  ul # fișiere li background-color: # fff7c0; frontieră-fund: 1px solid #efefef; padding: 2px; margin-bottom: 1px; 

Ceea ce ar trebui să avem acum este ilustrat în următoarea imagine.

Pasul 4 - Efectuarea de depuneri de fișiere cu PHP

Să începem partea PHP a tutorialului creând o clasă de setări. În această clasă putem salva parola de încărcare, precum și calea fișierului pentru dosarul încărcărilor.
Putem apoi să includem clasa în pagina noastră și să folosim valorile acesteia atunci când este necesar.
Puteți scrie fișiere PHP cu aproape aceleași instrumente pe care le utilizați pentru a scrie HTML și CSS, amintiți-vă doar să salvați fișierul cu sufixul .php.

Fără a merge mai adânc în programarea orientată pe obiecte (OOP), ceea ce face codul este că creează o nouă clasă cu tipul de valori care pot fi accesate fără a instanția clasa.
Acum putem accesa valorile sale doar prin apelarea Settings :: $ password; și Setări :: $ uploadFolder; Acesta este și locul unde puteți schimba parola oricând doriți.
marchează începutul și sfârșitul unui segment de cod PHP. Aceste segmente pot fi scrise în paginile html normale, iar serverul le va interpreta atunci când pagina este solicitată.

Ok, acum ajungem la afaceri. În fișierul html cu care lucrăm, să adăugăm următoarele în partea superioară a fișierului. Da, înainte de etichetă.

  
Mai întâi, îi spunem interpretului PHP să includă fișierul nostru de setări. De asemenea, am creat un nou mesaj $ variabil. Mai târziu, voi scrie informații despre proces în această variabilă și le voi afișa utilizatorului.
 
 // A încărcat utilizatorul ceva? dacă (isset ($ _ FILES ['fișier'])) 
 
Dacă formularul a fost trimis cu un fișier, matricea $ _FILE ar trebui să aibă o valoare cu cheia utilizată ca nume a câmpului de introducere a fișierului.
 
 $ target_path = Setări :: $ uploadFolder; $ target_path = $ target_path. ora (). '_'. Nume de bază ($ _FILES ['fișier'] ['nume']);
 
Aici găsim calea către dosarul de încărcare specificat în setări. Pe linia 2, adăugăm (concatenați) numele fișierului încărcat în calea țintă.
Rețineți, de asemenea, că am adăugat timestamp-ul serverului curent la începutul numelui fișierului. Există două motive pentru care fac asta.
În primul rând, este folosit pentru a stoca data, iar al doilea se va asigura că toate fișierele au nume diferite.
Dacă folosim o bază de date în spatele acestei aplicații, timpul de adăugare ar fi acolo și am putea serializa numele de fișiere și să salvăm numele original numai în tabela de baze de date,
dar deoarece nu există o bază de date, putem folosi această soluție.
 
 // Verificați parola pentru a verifica încărcarea legală dacă ($ _ POST ['password']! = Setări :: $ password) $ message = "Parola nevalidă!";  altceva 
 
Dacă trimiterea a fost făcută fără a da nici o parolă sau dacă parola a fost ceva diferit de cel definit în setări, nu vom gestiona fișierul și vom returna doar un mesaj care indică o parolă falsă.
 
 // Încercați să mutați fișierul încărcat în folderul desemnat dacă (mov_uploaded_file ($ _ FILES ['file'] ['tmp_name'], $ target_path)) $ message = "Fișierul". numele de bază ($ _FILES ['file'] ['name']). "a fost încărcat";  altceva $ message = "A apărut o eroare la încărcarea fișierului, încercați din nou!"; 
 
Ok, așa că parola avea dreptate, acum ce? Acum "salvăm" fișierul. Spun salvarea în paranteze, deoarece fișierul este de fapt deja în server; este doar în dosarul temporar.
Deci, pentru a face fișierul accesibil și pentru a vă asigura că serverul nu îl va șterge atunci când temp-ul este șters, trebuie să îl mutăm într-o locație sigură. Am folosit funcția move_uploaded_file.
Funcția are două argumente. Primul este numele temporar al fișierului atribuit automat de server, iar celălalt este calea țintă pe care am atribuit-o mai devreme.
Funcția returnează o valoare booleană indicând o operație de succes. Din nou, stabilim valoarea mesajului pentru a informa utilizatorul despre ce sa întâmplat.
 
 dacă (strlen ($ message)> 0) $ message = '
". $ mesaj. '
„; 
 
Și așa este ușor să încărcați fișiere pe server cu PHP! Aici am verificat dacă a fost scris ceva în variabila mesajului (lungime mai mare de 0) și formatat astfel încât să îl putem modela cu CSS.
 
Pasul 5 - Lista fișierelor încărcate
 
 / ** LISTA FILDELOR UPLOADED ** / $ uploaded_files = ""; // deschideți directorul pentru a citi $ dh = opendir (Settings :: $ uploadFolder);
 
Primul lucru pe care trebuie să faceți este să creați un mâner de dosar. Tot ce este nevoie este o singură comandă. Variabila uploaded_files este locul în care vom scrie numele de fișiere în format HTML.
 
 // LOOP prin fișiere în timp ce (($ file = readdir ($ dh))! == false) 
 
Aici introducem fișierele din dosar. Atâta timp cât putem citi următorul fișier din dosar în variabila de fișier, facem acest lucru și mergem mai departe. Odată ce am trecut prin toate fișierele, funcția se întoarce falsă și termină bucla.
 
 dacă ($ file! = '.' && $ fișier! = '...') 
 
"." și "..." sunt de asemenea returnate de această funcție, așa că trebuie să ne asigurăm că nu încercăm să facem nimic cu aceștia.
 
 $ filename = Setări :: $ uploadFolder. fișier $; $ parts = explode ("_", fișier $);
 
Adăugăm numele fișierului în calea directorului de încărcări și îl salvăm ca variabilă nume fișier. Apoi vom exploda numele fișierului la caracterul '_'.
Această funcție returnează o serie de șiruri care împart șirul inițial de fiecare dată când există un "_".
Deoarece există una din acele personaje, vom primi o matrice cu partea timestampului ca celula 1, iar numele fișierului original ca celula 2.
 
 $ size = formatBytes (dimensiunea fișierului ($ filename)); $ added = date ("m / d / Y", $ parts [0]); $ origName = $ părți [1];
 
Acum că avem valoarea timestampului ca și propriul șir, putem să îl formatăm într-o dată și să salvăm numele original al fișierului ca variabilă proprie.
Funcția de dimensiune a fișierului furnizată de PHP returnează dimensiunea fișierului numai în octeți, așa că îl vom formata într-o formă mai ușor de citit cu funcția formatBytes, care este acoperită într-un bit.
 
 $ filetype = getFileType (substr (fișier $, strlen ($ file) - 3)); $ uploaded_files. = "
$ origName $ size - $ a fost adăugată
\ N ";
 
Atunci când încărcăm un fișier pe server, PHP ne furnizează informațiile despre tipul de fișier, dar din moment ce nu avem loc pentru a stoca acele informații, va trebui să încercăm să obținem tipul de fișier cu o funcție personalizată.
Dau ultimele trei caractere ale numelui fișierului ca parametru pentru funcția getFileType (afișată mai târziu). Folosesc variabila filetype pentru a modela diferite fișiere cu CSS.
Tot ce a mai rămas acum este generarea unui șir HTML și adăugarea lui în variabila uploaded_files și închiderea mânerului dosarului.
 
  închis ($ dh);
 
 dacă (strlen ($ uploaded_files) == 0) $ uploaded_files = "
Niciun fișier găsit
";
 
Dacă nu s-au găsit fișiere, setați uploaded_files var pentru a afișa un mesaj.
 
De asemenea, trebuie să afișăm undeva șirul încărcat_file; astfel încât să adăugați această linie în interiorul 
 cu "fișierele".
 
 
 
Pasul 6 - Funcția auxiliară
 
Funcția getFileType încearcă să ghicească ce tip de fișier este prin citirea ultimelor caractere ale numelui. Acest lucru nu va funcționa cu extensii precum .jpeg și .tiff.
Pentru ao face mai universal, ar trebui să citim un substring începând cu perioada respectivă și trecând la sfârșitul numelui fișierului.
Dar atunci, dacă numele este ceva de genul my.new.car.ppic, vom primi noi.carpic ca extensii.
Deci, pentru a face acest lucru într-adevăr de lucru ar trebui să găsim ultimul perioadă în numele și să ia un substring de acolo de pe.
Dar pentru scopul acestui tutorial acest lucru este destul de aproape.
 
 funcția getFileType (extensie $) $ images = array ('jpg', 'gif', 'png', 'bmp'); $ docs = array ('txt', 'rtf', 'doc'); $ apps = array ('zip', 'rar', 'exe'); dacă (in_array ($ extension, $ images)) returnează "Imagini"; dacă (in_array ($ extension, $ docs)) returnează "Documents"; dacă (in_array ($ extension, $ apps)) returnează "Aplicații"; întoarcere ""; 
 
Această funcție următoare formatează octeții într-un format mai ușor de citit. Numai matematica de baza - nimic mai mult. Funcția însăși este din comentariile funcției PHP.net. 
 
 funcția formatBytes ($ bytes, $ precision = 2) $ units = array ('B', 'KB', 'MB', 'GB', 'TB'); $ bytes = max ($ octeți, 0); $ pow = podea (($ bytes? log ($ bytes): 0) / log (1024)); $ pow = min ($ pow, count ($ unități) - 1); $ octeți / = pow (1024, $ pow); retur ($ octeți, precizie $). "$ unități [$ pow];>>
 
Și asta este pentru partea PHP. Doar câteva JS și CSS și am terminat cu toții.
 
Pasul 7 - O atingere a CSS pentru o citire sporită
 
Ceea ce avem până acum ar trebui să arate:
  
Dar pentru a utiliza bine funcția getFileType și numele de clasă pe care se întoarce, am adăugat următoarele linii de CSS în fișierul style.css.
 
 ul # fișiere li a text-decoration: none; culoare: # 3564a9; padding: 2px 25px; pozitie fundal: stanga; background-repeat: nu-repeta;  ul # fișiere li.Documents a background-image: url ('... /images/text.jpg');  ul # fișiere li.Images a background-image: url ('... /images/picture.jpg');  ul # fișiere li.Aplicații a background-image: url ('... /images/zip.jpg');  p.error fundal-culoare: # fff7c0; frontieră-fund: 1px solid #efefef; font-weight: bold; culoare: # ff0000; umplutura: 6px; 
 
Am atribuit o pictogramă fiecărui tip de fișier. Pictograma pe care am folosit-o sunt din colecția magnifică găsită la http://www.famfamfam.com.
Acum ar trebui să avem ceva de genul asta.
  
Ah, mult mai bine.
 
Pasul 8 - Schimbați vizibilitatea fișierelor cu jQuery
 
Pentru un bit de finisare, să adăugăm câteva funcții suplimentare cu JavaScript. Creați un folder nou numit "js" și în acel dosar faceți un nou fișier, filestorage.js.
Apoi adăugați următoarea linie la sfârșitul paginii HTML chiar înainte de  etichetă.