Beachten Sie, dass die ungeordnete Liste mit der ID "Dateien" leer ist. Machen Sie sich jetzt keine Sorgen, da wir diesen Abschnitt mit den Dateien auf dem Server füllen werden.

Schritt 3 - Fügen Sie CSS und JS hinzu

Ich habe mit jQuery die Möglichkeit geschaffen, die Sichtbarkeit bestimmter Dateitypen umzuschalten, ohne die Seite aktualisieren zu müssen.
Dies ist rein optional und das Entfernen der JS beschleunigt das Laden der Seite etwas. Fügen wir dem HEAD der HTML-Datei die folgenden Zeilen hinzu.

Ich lade die jQuery zur Laufzeit von einer externen Quelle. Wenn Sie möchten, können Sie dies auch ändern, sodass die Datei mit dieser Zeile aus einer lokalen Quelle geladen wird.

Durch das direkte Laden der Datei von code.jquery.com wird sichergestellt, dass wir die neueste Version verwenden, und die Bandbreite wird bei jedem Laden der Seite gespart. Wenn der code.jquery.com-Server jedoch ausfällt oder überfüllt ist, wird die Datei möglicherweise nicht abgerufen wenn wir es brauchen.

Erstellen Sie einen neuen Ordner namens style und erstellen Sie eine neue CSS-Datei mit dem Namen style.css. Dies ist die Datei, die dem Browser mitteilt, wie die Seite aussehen soll. Es gibt ziemlich viel CSS hier, aber es ist für jeden einfach genug, ihm zu folgen.

Jetzt sollte die Seite ungefähr wie folgt aussehen.

 @CHARSET "ISO-8859-1"; body Hintergrundfarbe: #cddcec; Schriftfamilie: "Arial"; Schriftgröße: 11px;  div # container width: 600px; Marge: 0px auto; Grenze: 1px fest # e6eef6; Hintergrundfarbe: #ffffff;  div # container h1 Hintergrundfarbe: # 4b75b3; Marge: 0px; Polsterung: 8px; Schriftfamilie: "Arial"; Schriftgewicht: normal; Grenze: 1px fest # 3564a9;  div # container fieldset margin: 20px; Grenze: 1px fest # 98b9d0;  ul # menu list-style-type: none; Marge: 4px; Polsterung: 0px;  ul # menu li float: left; Marge: 4px;  ul # menu li.active Hintergrundfarbe: # 98b9d0; Rahmen links: 1px fest # 3564a9; Border-Top: 1px fest # 3564a9; Rahmen unten: 1px fest # e6eef6; Rahmen rechts: 1px fest # e6eef6;  ul # menu li a Textdekoration: keine; Schriftgröße: 10px; Polsterung: 2px; Farbe: # 3564a9;  ul # files list-style-type: none; Marge: 40px 0px 0px 0px; Polsterung: 0px;  ul # files li Hintergrundfarbe: # fff7c0; Rand unten: 1px fest #efefef; Polsterung: 2px; Rand unten: 1px; 

Was wir jetzt haben sollten, ist im folgenden Bild dargestellt.

Schritt 4 - Umgang mit Dateieingaben mit PHP

Beginnen wir mit der PHP-Seite des Tutorials, indem Sie eine Settings-Klasse erstellen. In dieser Klasse können wir das Upload-Passwort sowie den Dateipfad für den Upload-Ordner speichern.
Wir können die Klasse dann in unsere Seite aufnehmen und deren Werte bei Bedarf verwenden.
Sie können PHP-Dateien mit den gleichen Tools schreiben, die Sie zum Schreiben von HTML und CSS verwenden. Denken Sie daran, die Datei mit dem Suffix .php zu speichern.

Ohne näher auf die objektorientierte Programmierung (Object Oriented Programming, OOP) einzugehen, erstellt der Code eine neue Klasse mit den Werten, auf die zugegriffen werden kann, ohne die Klasse zu instanziieren.
Wir können jetzt auf die Werte zugreifen, indem Sie einfach Settings :: $ password aufrufen. und Einstellungen :: $ uploadFolder; Dies ist auch der Ort, an dem Sie das Passwort jederzeit ändern können.
Das markieren Sie den Anfang und das Ende eines PHP-Codesegments. Diese Segmente können in normale HTML-Seiten geschrieben werden und werden vom Server interpretiert, wenn die Seite angefordert wird.

Ok, jetzt geht es zur Sache. Fügen Sie in der html-Datei, mit der wir gearbeitet haben, Folgendes ganz oben in der Datei hinzu. Ja, vor dem Etikett.

  
Zunächst weisen wir den PHP-Interpreter an, unsere Einstellungsdatei einzuschließen. Ich habe auch eine neue Variable $ message eingerichtet. Später werde ich Prozessinformationen in diese Variable schreiben und sie dem Benutzer anzeigen.
 
 // Hat der Benutzer etwas hochgeladen? if (isset ($ _ FILES ['file']))) 
 
Wenn das Formular mit einer Datei gesendet wurde, sollte das $ _FILE-Array einen Wert mit dem von uns verwendeten Schlüssel als Namen des Dateieingabefelds haben.
 
 $ target_path = Einstellungen :: $ uploadFolder; $ target_path = $ target_path. Zeit() . '_'. Basisname ($ _FILES ['file'] ['name']);
 
Hier erhalten wir den Pfad zum Upload-Ordner, den wir in den Einstellungen angegeben haben. In Zeile 2 fügen wir den Namen der hochgeladenen Datei in den Zielpfad ein (verketten).
Beachten Sie auch, dass ich den aktuellen Server-Zeitstempel am Anfang des Dateinamens hinzugefügt habe. Dafür gibt es zwei Gründe.
Zum einen wird das Datum gespeichert und zum anderen wird sichergestellt, dass alle Dateien unterschiedliche Namen haben.
Wenn wir hinter dieser Anwendung eine Datenbank verwenden, wäre der Zeitpunkt des Hinzufügens vorhanden, und wir könnten die Dateinamen serialisieren und den ursprünglichen Namen nur in der Datenbanktabelle speichern,
Da es jedoch keine Datenbank gibt, können wir diese Problemumgehung einfach verwenden.
 
 // Überprüfen Sie das Passwort, um den legalen Upload zu überprüfen, falls ($ _ POST ['password']! = Einstellungen :: $ password) $ message = "Ungültiges Passwort!";  else 
 
Wenn die Übermittlung ohne Angabe eines Kennworts erfolgte oder wenn das angegebene Kennwort ein anderes als das in den Einstellungen definierte war, werden wir die Datei nicht behandeln und nur eine Meldung zurückschicken, die ein falsches Kennwort angibt.
 
 // Versuchen Sie, die hochgeladene Datei in den angegebenen Ordner zu verschieben, wenn (move_uploaded_file ($ _ FILES ['file'] ['tmp_name'], $ target_path)) $ message = "The file". Basisname ($ _FILES ['file'] ['name']). "wurde hochgeladen";  else $ message = "Beim Hochladen der Datei ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut!"; 
 
Ok, das Passwort war also richtig, was nun? Jetzt "speichern" wir die Datei. Ich sage in Klammern speichern, da sich die Datei tatsächlich bereits auf dem Server befindet. Es ist nur im temporären Ordner.
Um die Datei zugänglich zu machen und sicherzustellen, dass der Server sie nicht löscht, wenn die temporäre Temperatur gelöscht wird, müssen wir sie an einen sicheren Ort verschieben. Ich habe die Funktion move_uploaded_file verwendet.
Die Funktion benötigt zwei Argumente. Der erste ist der temporäre Name der vom Server automatisch zugewiesenen Datei und der andere ist der Zielpfad, den wir zuvor zugewiesen haben.
Die Funktion gibt einen booleschen Wert zurück, der eine erfolgreiche Operation anzeigt. Wieder setzen wir den Nachrichtenwert, um den Benutzer über das Geschehene zu informieren.
 
 if (strlen ($ message)> 0) $ message = '
'. $ message. '
'; 
 
Und so einfach ist das Hochladen von Dateien mit PHP auf den Server! Hier habe ich gerade geprüft, ob etwas in die Nachrichtenvariable geschrieben wurde (Länge mehr als 0) und formatieren, damit wir sie mit CSS formatieren können.
 
Schritt 5 - Listen Sie die hochgeladenen Dateien auf
 
 / ** LISTE UPLOADED FILES ** / $ uploaded_files = ""; // Verzeichnis zum Lesen öffnen $ dh = opendir (Settings :: $ uploadFolder);
 
Als Erstes erstellen Sie einen Ordner-Handle. Alles was es braucht ist ein Befehl. Die Variable uploaded_files schreibt die Ordner-Dateinamen im HTML-Format.
 
 // LOOP durch die Dateien while (($ file = readdir ($ dh))! == false) 
 
Hier durchlaufen wir die Dateien im Ordner. Solange wir die nächste Datei im Ordner in die Dateivariable einlesen können, tun wir dies und machen weiter. Wenn wir alle Dateien durchgegangen sind, gibt die Funktion false zurück und beendet die Schleife.
 
 if ($ file! = '.' && $ file! = '…') 
 
Das '.' und '...' werden ebenfalls von dieser Funktion zurückgegeben, sodass wir sicherstellen müssen, dass wir nicht versuchen, irgendetwas damit zu tun.
 
 $ filename = Einstellungen :: $ uploadFolder. $ file; $ parts = explodieren ("_", $ file);
 
Wir fügen den Namen der Datei in den Pfad des Upload-Ordners ein und speichern ihn als Dateinamenvariable. Dann explodieren wir den Namen der Datei mit dem Zeichen '_'.
Diese Funktion gibt ein Array von Strings zurück, das den ursprünglichen String jedes Mal teilt, wenn ein '_' erscheint..
Da es eines dieser Zeichen gibt, erhalten wir ein Array mit dem Zeitstempenteil als Zelle 1 und dem ursprünglichen Dateinamen als Zelle 2.
 
 $ size = formatBytes (Dateigröße ($ Dateiname)); $ added = date ("m / d / Y", $ parts [0]); $ origName = $ parts [1];
 
Da wir nun den Zeitstempelwert als eigene Zeichenfolge haben, können wir ihn in ein Datum formatieren und den ursprünglichen Dateinamen als eigene Variable speichern.
Die von PHP bereitgestellte Funktion filesize gibt die Größe der Datei nur in Bytes zurück. Daher formatieren wir sie mit der Funktion formatBytes, die ein wenig behandelt wird, in besser lesbarer Form.
 
 $ filetype = getFileType (substr ($ file, strlen ($ file) - 3)); $ uploaded_files. = "
$ origName $ size - $ hinzugefügt
\ n ";
 
Beim Hochladen einer Datei auf den Server liefert uns PHP die Dateitypinformationen. Da diese Informationen jedoch nicht gespeichert werden können, müssen wir versuchen, den Dateityp mit einer benutzerdefinierten Funktion abzurufen.
Ich gebe die drei letzten Zeichen des Dateinamens als Parameter für die Funktion getFileType (wird später angezeigt). Ich benutze die Dateitypvariable, um die verschiedenen Dateien mit CSS zu gestalten.
Jetzt müssen Sie nur noch eine HTML-Zeichenfolge generieren, diese in die uploaded_files -Variable einfügen und den Ordner-Handle schließen.
 
  closedir ($ dh);
 
 if (strlen ($ uploaded_files) == 0) $ uploaded_files = "
Keine Dateien gefunden
";
 
Wenn keine Dateien gefunden wurden, legen Sie upload_files var so fest, dass eine Nachricht angezeigt wird.
 
Die Zeichenfolge uploaded_files muss auch irgendwo angezeigt werden. Fügen Sie diese Zeile also in das Feld ein 
 mit der id 'files'.
 
 
 
Schritt 6 - Hilfsfunktion
 
Die Funktion getFileType versucht zu erraten, um welchen Typ es sich bei der Datei handelt, indem sie die letzten Zeichen ihres Namens liest. Dies funktioniert nicht mit Erweiterungen wie .jpeg und .tiff.
Um es universeller zu machen, müssten wir einen Teilstring ab dem Punkt und bis zum Ende des Dateinamens lesen.
Wenn der Name jedoch so etwas wie my.new.car.pic ist, würden wir new.car.pic als Erweiterungen erhalten.
Um dies wirklich funktionieren zu lassen, müssten wir das finden zuletzt Punkt im Namen und von dort aus einen Teilstring.
Für den Umfang dieses Tutorials ist dies jedoch nahe genug.
 
 Funktion getFileType ($ extension) $ images = array ('jpg', 'gif', 'png', 'bmp'); $ docs = array ('txt', 'rtf', 'doc'); $ apps = Array ('zip', 'rar', 'exe'); if (in_array ($ extension, $ images)) gibt "images" zurück; if (in_array ($ extension, $ docs)) gibt "Documents" zurück; if (in_array ($ extension, $ apps)) gibt "Applications" zurück. Rückkehr ""; 
 
Diese nächste Funktion formatiert die Bytes in ein besser lesbares Format. Grundlegende Mathematik - mehr nicht. Die Funktion selbst stammt aus den PHP.net-Funktionskommentaren. 
 
 Funktion formatBytes ($ Bytes, $ precision = 2) $ units = Array ('B', 'KB', 'MB', 'GB', 'TB'); $ bytes = max ($ bytes, 0); $ pow = floor (($ bytes? log ($ bytes): 0) / log (1024)); $ pow = min ($ pow, count ($ units) - 1); $ bytes / = pow (1024, $ pow); Runde zurückgeben ($ Byte, $ Präzision). ". $ units [$ pow];?>
 
Und das war es für den PHP-Teil. Nur noch ein bisschen mehr JS und CSS und wir sind fertig.
 
Schritt 7 - Ein Hauch von CSS für mehr Lesbarkeit
 
Was wir bisher haben, sollte so aussehen:
  
Aber um die Funktion getFileType und den zurückgegebenen Klassennamen gut zu nutzen, habe ich die nächsten CSS-Zeilen in die Datei style.css eingefügt.
 
 ul # files li a Textdekoration: keine; Farbe: # 3564a9; Polsterung: 2px 25px; Hintergrundposition: links; Hintergrundwiederholung: keine Wiederholung;  ul # files li.Documents a Hintergrundbild: url ('… /images/text.jpg');  ul # files li.Images a background-image: url ('… /images/picture.jpg');  ul # files li.Applications a background-image: url ('… /images/zip.jpg');  p.error Hintergrundfarbe: # fff7c0; Rand unten: 1px fest #efefef; Schriftdicke: fett; Farbe: # ff0000; Polsterung: 6px; 
 
Ich ordne jedem Dateityp ein Symbol zu. Die Ikone, die ich verwendet habe, stammen aus der großartigen Sammlung von http://www.famfamfam.com.
Was wir jetzt haben sollten, ist so etwas.
  
Ah, viel besser.
 
Schritt 8 - Umschalten der Dateisichtbarkeit mit jQuery
 
Für ein Schlußbiss fügen wir einige zusätzliche Funktionen mit JavaScript hinzu. Erstellen Sie einen neuen Ordner mit dem Namen "js" und erstellen Sie in diesem Ordner eine neue Datei, "filestorage.js".
Fügen Sie dann die folgende Zeile am Ende der HTML-Seite direkt vor dem ein  Etikett.