Si noti che l'elenco non ordinato con l'id "file" è vuoto. Non preoccuparti di questo adesso, poiché riempiremo quella sezione con i file nel server.

Passaggio 3: aggiungere CSS e JS

Ho usato jQuery per creare la possibilità di attivare la visibilità di determinati tipi di file senza dover aggiornare la pagina.
Questo è puramente opzionale e la rimozione del JS velocizzerà un po 'il caricamento della pagina. Quindi aggiungiamo le seguenti righe all'HEAD del file HTML.

Sto caricando il jQuery da una fonte esterna in fase di runtime. Anche in questo caso, se lo preferisci, puoi cambiarlo in modo che il file venga caricato da una sorgente locale con questa linea.

Il caricamento del file direttamente da code.jquery.com garantisce che stiamo utilizzando la versione più recente e che la nostra larghezza di banda venga salvata su ogni caricamento della pagina, ma se il server code.jquery.com si trovasse inattivo o sovraffollato, potremmo non ottenere il file quando ne abbiamo bisogno.

Crea una nuova cartella chiamata stile e crea un nuovo file CSS con il nome style.css. Questo sarà il file che dice al browser come vogliamo che la pagina appaia. C'è un sacco di CSS qui, ma è abbastanza semplice da seguire per chiunque.

Ora la pagina dovrebbe apparire come la seguente.

 @CHARSET "ISO-8859-1"; body background-color: #cddcec; font-family: "Arial"; font-size: 11px;  div # container width: 600px; margine: 0px auto; border: 1px solid # e6eef6; background-color: #ffffff;  div # container h1 background-color: # 4b75b3; margine: 0px; imbottitura: 8px; font-family: "Arial"; font-weight: normal; border: 1px solid # 3564a9;  div # container fieldset margin: 20px; border: 1px solid # 98b9d0;  menu ul # list-style-type: none; margine: 4px; imbottitura: 0px;  menu ul # li float: left; margine: 4px;  menu ul # li.active background-color: # 98b9d0; border-left: 1px solid # 3564a9; border-top: 1px solid # 3564a9; border-bottom: 1px solid # e6eef6; border-right: 1px solid # e6eef6;  ul # menu li a text-decoration: none; font-size: 10px; imbottitura: 2px; colore: # 3564a9;  ul # files list-style-type: none; margine: 40px 0px 0px 0px; imbottitura: 0px;  ul # files li background-color: # fff7c0; border-bottom: 1px solid #efefef; imbottitura: 2px; margin-bottom: 1px; 

Quello che dovremmo avere ora è illustrato nell'immagine seguente.

Passaggio 4: gestione dei contributi di input dei file con PHP

Iniziamo il lato PHP del tutorial creando una classe Settings. In questa classe possiamo salvare la password di caricamento e il percorso del file per la cartella dei caricamenti.
Possiamo quindi includere la classe nella nostra pagina e usarne i valori quando necessario.
Puoi scrivere file PHP con praticamente gli stessi strumenti che usi per scrivere HTML e CSS, basta ricordare di salvare il file con il suffisso .php.

Senza approfondire la programmazione orientata agli oggetti (OOP), ciò che fa il codice è che crea una nuova classe con il tipo di valori a cui è possibile accedere senza istanziare la classe.
Ora possiamo accedere ai valori semplicemente chiamando Settings :: $ password; e Impostazioni :: $ uploadFolder; Questo è anche il posto dove puoi cambiare la password quando vuoi.
Il segna l'inizio e la fine di un segmento di codice PHP. Questi segmenti possono essere scritti all'interno di normali pagine html e il server li interpreterà quando viene richiesta la pagina.

Ok, ora arriviamo agli affari. Nel file html con cui abbiamo lavorato, aggiungiamo quanto segue nella parte superiore del file. Sì, prima del etichetta.

  
Per prima cosa diciamo all'interprete PHP di includere il nostro file delle impostazioni. Ho anche impostato un nuovo messaggio $ variabile. In seguito scriverò le informazioni sul processo in questa variabile e le visualizzerò all'utente.
 
 // L'utente ha caricato qualcosa? if (isset ($ _ FILES ['file'])) 
 
Se il modulo è stato inviato con un file, l'array $ _FILE dovrebbe avere un valore con la chiave che abbiamo usato come nome del campo di input del file.
 
 $ target_path = Impostazioni :: $ uploadFolder; $ target_path = $ target_path. tempo() . '_'. basename ($ _FILES ['file'] ['name']);
 
Qui abbiamo il percorso per la cartella di caricamento che abbiamo specificato nelle impostazioni. Alla riga 2, aggiungiamo (concatenare) il nome del file caricato nel percorso di destinazione.
Nota anche che ho aggiunto il timestamp del server corrente all'inizio del nome del file. Ci sono due ragioni per cui lo faccio.
Per prima cosa viene utilizzato per memorizzare la data e in secondo luogo si accerterà che tutti i file abbiano nomi diversi.
Dovremmo utilizzare un database dietro questa applicazione, il tempo di aggiunta ci sarebbe, e potremmo serializzare i nomi dei file e salvare il nome originale solo nella tabella del database,
ma poiché non esiste un database, possiamo semplicemente utilizzare questa soluzione alternativa.
 
 // Controlla la password per verificare il caricamento legale se ($ _ POST ['password']! = Impostazioni :: $ password) $ message = "Password non valida!";  altro 
 
Se l'invio è stato effettuato senza fornire alcuna password o se la password specificata era diversa da quella definita nelle impostazioni, non gestiremo il file e restituiremo solo un messaggio che indica una password errata.
 
 // Prova a spostare il file caricato nella cartella designata se (move_uploaded_file ($ _ FILES ['file'] ['tmp_name'], $ target_path)) $ message = "Il file". basename ($ _FILES ['file'] ['name']). "è stato caricato";  else $ message = "Si è verificato un errore durante il caricamento del file, per favore riprova!"; 
 
Ok, quindi la password era giusta, e adesso? Ora "salviamo" il file. Dico save in parentesi poiché il file è già nel server; è solo nella cartella temporanea.
Quindi, per rendere accessibile il file e per assicurarsi che il server non lo elimini quando la temp è deselezionata, dobbiamo spostarlo in un luogo sicuro. Ho usato la funzione move_uploaded_file.
La funzione accetta due argomenti. Il primo è il nome temporaneo del file assegnato automaticamente dal server e l'altro è il percorso target che abbiamo assegnato in precedenza.
La funzione restituisce un valore booleano che indica un'operazione riuscita. Ancora una volta impostiamo il valore del messaggio per informare l'utente di cosa è successo.
 
 if (strlen ($ message)> 0) $ message = '
'. $ messaggio. '
'; 
 
Ed è così facile caricare file sul server con PHP! Qui ho appena controllato se qualcosa è stato scritto nella variabile del messaggio (lunghezza più di 0) e formattato in modo che possiamo adattarlo ai CSS.
 
Passaggio 5: elenca i file caricati
 
 / ** LIST UPLOADED FILES ** / $ uploaded_files = ""; // Apri la directory per leggere $ dh = opendir (Settings :: $ uploadFolder);
 
La prima cosa da fare è creare un handle di cartelle. Tutto ciò che serve è un comando. La variabile loaded_files è dove scriveremo i nomi dei file delle cartelle in formato HTML.
 
 // LOOP attraverso i file while (($ file = readdir ($ dh))! == false) 
 
Qui passiamo in rassegna i file nella cartella. Finché possiamo leggere il prossimo file nella cartella nella variabile file, lo facciamo e passiamo oltre. Una volta passati tutti i file, la funzione restituisce false e termina il ciclo.
 
 if ($ file! = '.' && $ file! = '...') 
 
Il '.' e "..." sono anche restituiti da questa funzione, quindi dovremo assicurarci di non tentare di fare nulla con quelli.
 
 $ nomefile = Impostazioni :: $ uploadFolder. $ File; $ parti = esplode ("_", $ file);
 
Aggiungiamo il nome del file nel percorso della cartella uploads e lo salviamo come variabile filename. Quindi esploderemo il nome del file nel carattere "_".
Questa funzione restituisce una serie di stringhe che dividono la stringa originale ogni volta che c'è un '_'.
Dato che c'è uno di quei personaggi, riceviamo un array con la parte timestamp come cella 1 e il nome file originale come cella 2.
 
 $ size = formatBytes (filesize ($ nomefile)); $ added = date ("m / d / Y", $ parti [0]); $ origName = $ parti [1];
 
Ora che abbiamo il valore di timestamp come sua stringa, possiamo formattarlo in una data e salvare il nome file originale come se fosse una variabile.
La funzione filesize fornita da PHP restituisce la dimensione del file solo in byte, quindi la formificheremo in una forma più leggibile con la funzione formatBytes, che è coperta in un po '.
 
 $ filetype = getFileType (substr ($ file, strlen ($ file) - 3)); $ uploaded_files. = "
$ origName $ dimensione - $ aggiunto
\ N ";
 
Quando carichi un file nel server, PHP ci fornisce le informazioni sul tipo di file, ma poiché non abbiamo spazio per archiviare tali informazioni, dovremo cercare di ottenere il tipo di file con una funzione personalizzata.
Sto dando gli ultimi tre caratteri del nome del file come parametro alla funzione getFileType (mostrata più avanti). Sto usando la variabile del tipo di file per modellare i diversi file con CSS.
Tutto ciò che rimane ora è generare una stringa HTML e aggiungerla alla variabile upload_files e chiudere l'handle della cartella.
 
  closedir ($ dh);
 
 if (strlen ($ uploaded_files) == 0) $ uploaded_files = "
Nessun file trovato
";
 
Se non sono stati trovati file, imposta la variabile upload_files per visualizzare un messaggio.
 
Dobbiamo anche mostrare la stringa loaded_files da qualche parte; quindi aggiungi questa linea all'interno di 
 con l'id 'file'.
 
 
 
Passaggio 6 - Funzione ausiliaria
 
La funzione getFileType prova a indovinare di che tipo è il file leggendo gli ultimi caratteri del suo nome. Questo non funzionerà con estensioni come .jpeg e .tiff.
Per renderlo più universale, dovremmo leggere una sottostringa che inizia al punto e va alla fine del nome del file.
Ma se il nome è qualcosa come my.new.car.pic, otterremmo new.car.pic come estensioni.
Quindi per farlo funzionare davvero dovremmo trovare il scorso periodo nel nome e prendere una sottostringa da lì in poi.
Ma per lo scopo di questo tutorial questo è abbastanza vicino.
 
 function getFileType (estensione $) $ images = array ('jpg', 'gif', 'png', 'bmp'); $ docs = array ('txt', 'rtf', 'doc'); $ apps = array ('zip', 'rar', 'exe'); se (in_array ($ extension, $ images)) restituisce "Immagini"; se (in_array ($ extension, $ docs)) restituisce "Documenti"; se (in_array ($ extension, $ apps)) restituisce "Applicazioni"; ritorno ""; 
 
Questa prossima funzione formatta i byte in un formato più leggibile. Solo matematica di base - niente di più. La funzione stessa deriva dai commenti della funzione PHP.net. 
 
 function formatBytes ($ bytes, $ precision = 2) $ units = array ('B', 'KB', 'MB', 'GB', 'TB'); $ byte = max ($ byte, 0); $ pow = floor (($ bytes? log ($ bytes): 0) / log (1024)); $ pow = min ($ pow, count ($ units) - 1); $ byte / = pow (1024, $ pow); return round ($ bytes, $ precision). ". $ units [$ pow];?>
 
E questo è tutto per la parte PHP. Solo qualche altro JS e CSS e abbiamo finito.
 
Step 7 - Un tocco di CSS per aumentare la leggibilità
 
Quello che abbiamo finora dovrebbe assomigliare:
  
Ma per fare buon uso della funzione getFileType e del nome della classe restituita, ho aggiunto le prossime righe di CSS nel file style.css.
 
 ul # files li a text-decoration: none; colore: # 3564a9; imbottitura: 2px 25px; posizione di sfondo: sinistra; background-repeat: no-repeat;  ul # files li.Documents a background-image: url ('... /images/text.jpg');  ul # files li.Immagina a background-image: url ('... /images/picture.jpg');  file ul # li.Applicazioni a background-image: url ('... /images/zip.jpg');  p.error background-color: # fff7c0; border-bottom: 1px solid #efefef; font-weight: bold; colore: # ff0000; imbottitura: 6px; 
 
Sto assegnando un'icona a ciascun tipo di file. L'icona che ho usato proviene dalla magnifica collezione trovata su http://www.famfamfam.com.
Ora quello che dovremmo avere è qualcosa di simile.
  
Ah, molto meglio.
 
Passaggio 8: attiva la visibilità dei file con jQuery
 
Per un bit di finitura, aggiungiamo alcune funzionalità aggiuntive con JavaScript. Crea una nuova cartella chiamata "js" e in quella cartella crea un nuovo file, filestorage.js.
Quindi aggiungi la seguente riga alla fine della pagina HTML immediatamente prima del  etichetta.