Online-Dateispeicherung mit PHP

() translation by (you can also view the original English article)

In diesem Tutorial werde ich Ihnen zeigen, wie einfach es ist, ein Online-Dateispeichersystem mit PHP zu erstellen. Sie lernen, wie Sie Dateien mit PHP hochladen und auflisten, indem Sie den Ordner "Uploads" scannen.

Einführung

Haben Sie sich jemals gewünscht, dass Sie unterwegs Dateien hochladen könnten? Was ist, wenn Sie ein öffentliches Terminal oder den Computer einer anderen Person verwenden und keine Software von Drittanbietern für die Dateiübertragung installieren können?
Wäre es nicht schön, einfach eine Seite in einem Browser zu öffnen und Ihre Datei mit einem Klick auf eine Schaltfläche hochzuladen?

Es gibt bereits viele Datei-Hosting-Sites, aber in diesem Tutorial werde ich Ihnen zeigen, wie Sie Ihre eigenen erstellen können. Folgendes werden wir erstellen:

Schritt 1 - Grundlegendes HTML

Lassen Sie uns anfangen. Das erste, was wir brauchen, ist ein leeres HTML-Dokument. Ich verwende XHTML 1.0 Transitional mit ISO-8859-1 Zeichensatz. Wenn Sie es vorziehen und keine Sonderzeichen benötigen, können Sie diese durch einen UTF-8-Zeichensatz ersetzen.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Online file storage</title>
</head>
<body>

</body>
</html>

Schritt 2 - Hinzufügen des Datei-Upload-Formulars

Ok, jetzt, wo wir eine einfache HTML-Datei haben, haben wir im Grunde nichts :) Also fügen wir etwas Inhalt hinzu. Ich werde den gesamten Inhalt in ein DIV-Element einschließen, um die Seite mit CSS zu gestalten. Die Tags "Fieldset" und "Legend" sind vielleicht etwas selten, aber sie sind das eindeutige Markup für die Organisation von Inhalten in Gruppen.

Ich habe ein Passwortfeld hinzugefügt, mit dem wir unerwünschte Uploader verscheuchen, da wir nicht möchten, dass Fremde unser Dateikontingent mit zufälligem Müll füllen.

Beachten Sie, dass im Gegensatz zum alltäglichen Standardformular für dieses Element der Enctype auf Multipart/Formulardaten festgelegt ist.
Dies wird für POST-Dateien benötigt und muss hier sein. Ich habe den Aktionsmodifikator so eingestellt, dass er auf dieselbe Datei verweist.
Dies bedeutet, dass nach dem Absenden des Formulars die Formulardaten auf dieselbe Seite zurückgesendet werden.

Das versteckte Feld MAX_FILE_SIZE ist für PHP und definiert die maximale Größe (in Bytes), die wir senden können. Dies überschreibt jedoch nicht die Einstellung MAX_FILE_SIZE in der Datei php.ini, sodass immer die maximale Größe bestimmt wird.


<div id="container">
	<h1>Online File Storage</h1>
	
	<fieldset>
		<legend>Add a new file to the storage</legend>
		<form method="post" action="index.php" enctype="multipart/form-data">
		<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
		<p><label for="name">Select file</label><br />
		<input type="file" name="file" /></p>
		<p><label for="password">Password for upload</label><br />
		<input type="password" name="password" /></p>
		<p><input type="submit" name="submit" value="Start upload" /></p>
		</form>	
	</fieldset>
</div>

Wenn wir die Datei in einem Browser öffnen, haben wir jetzt ein langweiliges und einfaches HTML-Formular. Es wird Inhalte an sich selbst senden, weiß aber nicht, was es damit anfangen soll.

Wir benötigen einen Platz zum Anzeigen der Dateien, die wir bereits hochgeladen haben. Fügen Sie daher das folgende HTML in den Container div unter dem ersten Feldsatz ein.

1
2	<fieldset>
3	<legend>Previousely uploaded files</legend>
4	<ul id="menu">
5	<li><a href="">All files</a></li>
6	<li><a href="">Documents</a></li>
7	<li><a href="">Images</a></li>
8	<li><a href="">Applications</a></li>
9	</ul>
10
11	<ul id="files">
12	</ul>
13	</fieldset>

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 füllen werden.

Schritt 3 - Fügen Sie CSS und JS hinzu

Ich habe jQuery verwendet, um die Möglichkeit zu schaffen, die Sichtbarkeit bestimmter Dateitypen umzuschalten, ohne die Seite aktualisieren zu müssen.
Das ist rein optional und das Entfernen des JS beschleunigt das Laden der Seite etwas. Fügen wir also die folgenden Zeilen zum HEAD der HTML-Datei hinzu.


<style type="text/css" media="all"> 
	@import url("style/style.css");
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>

Ich lade die jQuery zur Laufzeit von einer externen Quelle. Wenn Sie möchten, können Sie dies erneut ändern, sodass die Datei mit dieser Zeile aus einer lokalen Quelle geladen wird.

1
2	<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

Durch das Laden der Datei direkt von code.jquery.com wird sichergestellt, dass wir die neueste Version verwenden, und unsere Bandbreite wird bei jedem Laden der Seite gespart. Sollte der Server code.jquery.com jedoch ausfallen oder überfüllt sein, wird die Datei möglicherweise nicht abgerufen wenn wir es brauchen.

Erstellen Sie einen neuen Ordner mit dem Namen style und erstellen Sie darin eine neue CSS-Datei mit dem Namen style.css. Das ist die Datei, die dem Browser mitteilt, wie die Seite aussehen soll. Es gibt hier ziemlich viel CSS, aber es ist einfach genug, dass jeder folgen kann.

Jetzt sollte die Seite ungefähr so aussehen.


@CHARSET "ISO-8859-1";

body
{
	background-color: #cddcec;
	font-family: "Arial";
	font-size: 11px;
}

div#container
{
	width: 600px;
	margin: 0px auto;
	border: 1px solid #e6eef6;
	background-color: #ffffff;
}

div#container h1
{
	background-color: #4b75b3;
	margin: 0px;
	padding: 8px;
	font-family: "Arial";
	font-weight: normal;
	border: 1px solid #3564a9;
}

div#container fieldset
{
	margin: 20px;
	border: 1px solid #98b9d0;
}

ul#menu
{
	list-style-type: none;
	margin: 4px;
	padding: 0px;
}

ul#menu li
{
	float: left;
	margin: 4px;
}

ul#menu 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;
	padding: 2px;
	color: #3564a9;
}

ul#files
{
	list-style-type: none;
	margin: 40px 0px 0px 0px;
	padding: 0px;
}

ul#files li
{
	background-color: #fff7c0;
	border-bottom: 1px solid #efefef;
	padding: 2px;
	margin-bottom: 1px;
}

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

Schritt 4 - Behandeln von Dateieingaben mit PHP

Beginnen wir die PHP-Seite des Tutorials, indem wir eine Settings-Klasse erstellen. In dieser Klasse können wir das Upload-Passwort sowie den Dateipfad für den Upload-Ordner speichern.
Wir können die Klasse dann in unsere Seite aufnehmen und ihre Werte bei Bedarf verwenden.
Sie können PHP-Dateien mit fast denselben Tools schreiben, die Sie zum Schreiben von HTML und CSS verwenden. Denken Sie jedoch daran, die Datei mit dem Suffix .php zu speichern.


<?php
/**
 * Class Settings holds the upload settings
 *
 */
class Settings
{
	static $password = "mypassword";
	static $uploadFolder = "uploads/";
}
?>

Ohne näher auf die objektorientierte Programmierung (OOP) einzugehen, erstellt der Code eine neue Klasse mit den Werten, auf die zugegriffen werden kann, ohne die Klasse zu instanziieren.
Wir können jetzt einfach auf die Werte zugreifen, indem wir Settings ::$password aufrufen. und Einstellungen ::$uploadFolder; Hier können Sie auch das Passwort jederzeit ändern.
Die <?php und?> Markieren den Anfang und das Ende eines PHP-Codesegments. Diese Segmente können in normale HTML-Seiten geschrieben werden, und der Server interpretiert sie, wenn die Seite angefordert wird.

Ok, jetzt kommen wir zur Sache. Fügen wir in der HTML-Datei, mit der wir gearbeitet haben, Folgendes ganz oben in die Datei ein. Ja, vor dem <head>-Tag.


<?php 
//Load the settings
require_once("settings.php");

$message = "";

Zuerst weisen wir den PHP-Interpreter an, unsere Einstellungsdatei einzuschließen. Ich habe auch eine neue Variable $message eingerichtet. Später werde ich Prozessinformationen in diese Variable schreiben und sie dem Benutzer anzeigen.

1
2	//Has the user uploaded something?
3	if(isset($_FILES['file']))
4	{

Wenn das Formular mit einer Datei gesendet wurde, sollte das Array $_FILE einen Wert mit dem Schlüssel haben, den wir als Namen des Dateieingabefelds verwendet haben.

1
2	$target_path = Settings::$uploadFolder;
3	$target_path = $target_path . time() . '_' . basename( $_FILES['file']['name']);

Hier erhalten wir den Pfad zu dem Upload-Ordner, den wir in den Einstellungen angegeben haben. In Zeile 2 fügen wir den Namen der hochgeladenen Datei zum Zielpfad hinzu (verketten ihn).
Beachten Sie auch, dass ich den aktuellen Server-Zeitstempel am Anfang des Dateinamens hinzugefügt habe. Dafür gibt es zwei Gründe.
Erstens wird es zum Speichern des Datums verwendet und zweitens wird sichergestellt, dass alle Dateien unterschiedliche Namen haben.
Sollten wir eine Datenbank hinter dieser Anwendung verwenden, wäre der Zeitpunkt des Hinzufügens da, und wir könnten die Dateinamen serialisieren und den ursprünglichen Namen nur in der Datenbanktabelle speichern.
Da es jedoch keine Datenbank gibt, können wir diese Problemumgehung verwenden.


	//Check the password to verify legal upload
	if($_POST['password'] != Settings::$password)
	{
		$message = "Invalid Password!";
	}
	else
	{

Wenn die Übermittlung ohne Angabe eines Passworts erfolgte oder wenn das angegebene Passwort etwas anderes als das in den Einstellungen definierte war, werden wir die Datei nicht verarbeiten und nur eine Nachricht zurückgeben, die ein falsches Passwort angibt.


		//Try to move the uploaded file into the designated folder
		if(move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {
		    $message = "The file ".  basename( $_FILES['file']['name']). 
		    " has been uploaded";
		} else{
		    $message = "There was an error uploading the file, please try again!";
		}
	}
}

Ok, das Passwort war also richtig, was nun? Jetzt "speichern" wir die Datei. Ich sage in Klammern speichern, da sich die Datei tatsächlich bereits auf dem Server befindet. Es ist nur im temporären Ordner.
Um die Datei zugänglich zu machen und sicherzustellen, dass der Server sie nicht löscht, wenn die Temperatur gelöscht wird, müssen wir sie an einen sicheren Ort verschieben. Ich habe die Funktion move_uploaded_file verwendet.
Die Funktion akzeptiert zwei Argumente. Der erste ist der temporäre Name der Datei, die vom Server automatisch zugewiesen wird, und der andere ist der zuvor zugewiesene Zielpfad.
Die Funktion gibt einen Booleschen Wert zurück, der eine erfolgreiche Operation anzeigt. Wieder setzen wir den Nachrichtenwert, um den Benutzer darüber zu informieren, was passiert ist.


if(strlen($message) > 0)
{
	$message = '<p class="error">' . $message . '</p>';
}

Und so einfach ist es, Dateien mit PHP auf den Server hochzuladen! Hier habe ich gerade überprüft, ob etwas in die Nachrichtenvariable geschrieben wurde (Länge größer als 0) und es formatiert, damit wir es mit CSS formatieren können.

Schritt 5 - Listen Sie die hochgeladenen Dateien auf


/** LIST UPLOADED FILES **/
$uploaded_files = "";

//Open directory for reading
$dh = opendir(Settings::$uploadFolder);

Als erstes müssen Sie ein Ordnerhandle erstellen. Alles was es braucht ist ein Befehl. In der Variablen uploaded_files schreiben wir die Ordner-Dateinamen im HTML-Format.

1
2	//LOOP through the files
3	while (($file = readdir($dh)) !== false)
4	{

Hier durchlaufen wir die Dateien im Ordner. Solange wir die nächste Datei im Ordner in die Dateivariable einlesen können, tun wir dies und fahren fort. Sobald wir alle Dateien durchlaufen haben, gibt die Funktion false zurück und beendet die Schleife.

1
2	if($file != '.' && $file != '..')
3	{

Das '.' und '..' werden ebenfalls von dieser Funktion zurückgegeben, daher müssen wir sicherstellen, dass wir nicht versuchen, etwas damit zu tun.

1
2	$filename = Settings::$uploadFolder . $file;
3	$parts = explode("_", $file);

Wir fügen den Namen der Datei in den Pfad des Upload-Ordners ein und speichern ihn als Dateinamenvariable. Dann explodieren wir den Namen der Datei am Zeichen '_'.
Diese Funktion gibt ein Array von Zeichenfolgen zurück, die die ursprüngliche Zeichenfolge jedes Mal aufteilen, wenn ein '_' angezeigt wird.
Da es eines dieser Zeichen gibt, erhalten wir ein Array mit dem Zeitstempelteil als Zelle 1 und dem ursprünglichen Dateinamen als Zelle 2.

1
2	$size = formatBytes(filesize($filename));
3	$added = date("m/d/Y", $parts[0]);
4	$origName = $parts[1];

Nachdem wir den Zeitstempelwert als eigene Zeichenfolge haben, können wir ihn in ein Datum formatieren und den ursprünglichen Dateinamen als eigene Variable speichern.
Die von PHP bereitgestellte Dateigrößenfunktion gibt die Größe der Datei nur in Bytes zurück, sodass wir sie mit der Funktion formatBytes, die in Kürze behandelt wird, in eine besser lesbare Form formatieren.

1
2	$filetype = getFileType(substr($file, strlen($file) - 3));
3	$uploaded_files .= "<li class=\"$filetype\"><a href=\"$filename\">$origName</a> $size - $added</li>\n";

Beim Hochladen einer Datei auf den Server stellt PHP uns die Dateitypinformationen zur Verfügung. Da wir diese Informationen jedoch nicht speichern können, müssen wir versuchen, den Dateityp mit einer benutzerdefinierten Funktion abzurufen.
Ich gebe der getFileType-Funktion (später gezeigt) die drei letzten Zeichen des Dateinamens als Parameter. Ich verwende die Dateitypvariable, um die verschiedenen Dateien mit CSS zu formatieren.
Jetzt müssen Sie nur noch eine HTML-Zeichenfolge generieren, diese in die Variable uploaded_files einfügen und das Ordnerhandle schließen.

1
2	}
3	}
4	closedir($dh);


if(strlen($uploaded_files) == 0)
{
	$uploaded_files = "<li><em>No files found</em></li>";
}

Wenn keine Dateien gefunden wurden, setzen Sie die Variable uploaded_files so, dass eine Nachricht angezeigt wird.

Wir müssen auch die Zeichenfolge uploaded_files irgendwo anzeigen. Fügen Sie diese Zeile in das <ul> mit der ID 'files' ein.

1
2	<?php echo $uploaded_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. Das funktioniert nicht mit Erweiterungen wie .jpeg und .tiff.
Um es universeller zu gestalten, müssten wir einen Teilstring lesen, der am Punkt beginnt und bis zum Ende des Dateinamens reicht.
Aber wenn der Name so etwas wie my.new.car.pic ist, bekommen wir new.car.pic als Erweiterung.
Damit das wirklich funktioniert, müssten wir den letzten Punkt im Namen finden und von da an einen Teilstring nehmen.
Für den Umfang dieses Tutorials ist dies jedoch nah genug.


function getFileType($extension)
{
	$images = array('jpg', 'gif', 'png', 'bmp');
	$docs 	= array('txt', 'rtf', 'doc');
	$apps 	= array('zip', 'rar', 'exe');
	
	if(in_array($extension, $images)) return "Images";
	if(in_array($extension, $docs)) return "Documents";
	if(in_array($extension, $apps)) return "Applications";
	return "";
}

Diese nächste Funktion formatiert die Bytes in ein besser lesbares Format. Nur einfache Mathematik - nichts weiter. Die Funktion selbst stammt aus den PHP.net-Funktionskommentaren.


function 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); 
   
    return round($bytes, $precision) . ' ' . $units[$pow]; 
} 
?>

Und das war's für den PHP-Teil. Nur noch ein paar JS und CSS und wir sind alle fertig.

Schritt 7 - Ein Hauch von CSS für mehr Lesbarkeit

Wie wir bisher haben, sollte aussehen:

Um die Funktion getFileType und den zurückgegebenen Klassennamen gut nutzen zu können, habe ich die nächsten Zeilen von CSS in die Datei style.css eingefügt.


ul#files li a
{
	text-decoration: none;
	color: #3564a9;
	padding: 2px 25px;
	background-position: left;
	background-repeat: no-repeat;
}

ul#files li.Documents a
{
	background-image: 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
{
	background-color: #fff7c0;
	border-bottom: 1px solid #efefef;
	font-weight: bold;
	color: #ff0000;
	padding: 6px;
}

Ich weise jedem Dateityp ein Symbol zu. Die Symbole, die ich verwendet habe, stammen aus der großartigen Sammlung unter http://www.famfamfam.com.
Was wir jetzt haben sollten, ist so etwas.

Ah, viel besser.

Schritt 8 - Umschalten der Dateisichtbarkeit mit jQuery

Lassen Sie uns abschließend einige zusätzliche Funktionen mit JavaScript hinzufügen. Erstellen Sie einen neuen Ordner mit dem Namen "js" und erstellen Sie in diesem Ordner eine neue Datei, filestorage.js.
Fügen Sie dann die folgende Zeile am Ende der HTML-Seite direkt vor dem </body>-Tag hinzu.

1
2	<script src="js/filestorage.js" />

Es wird empfohlen, diese Art von JS-Dateien ganz am Ende der Seite einzufügen, damit das Document Object Model (DOM) zuerst geladen werden kann.


function HideFiles(selector)
{
	//show all files
	if(selector === "All files")
	{
		$("#files > li").show();
		return true;
	}
	else
	{
		//show only the selected filetype
		$("#files > li").hide();
		$("#files > li." + selector).show();
		return true;
	}	
}

Die HideFiles-Funktion macht zwei Dinge. Wenn der Parameter-Selektor gleich 'Alle Dateien' ist, durchläuft die Funktion alle <li>-Elemente in den Dateien <ul> und macht sie sichtbar.
Wenn jedoch ein anderer Parameter angegeben wurde, verbirgt die Funktion alles und zeigt dann nur diejenigen mit demselben Klassennamen wie der Parameter an.


function prepareMenu()
{ 
	$("#menu li").click( 
		function () {            
			$("#menu li").each(
				function(){
					$(this).removeClass("active");
				}
			);
			$(this).addClass("active");
			HideFiles($(this).children().html());
	    return false;
	});

	//Select the first as default
	$("#menu li:first").click();
}

Die Funktion prepareMenu fügt dem Ereignis onClick im Menü <li> eine Funktion hinzu.
Entfernen Sie bei einem Klick die Klasse 'active' aus allen und fügen Sie sie dann zu der angeklickten hinzu. Rufen Sie die HideFiles-Funktion mit dem Text innerhalb des Elements innerhalb des angeklickten <li> auf.
Schließlich rufen wir das Ereignis onClick für das erste Menüelement auf, um sicherzustellen, dass es beim Laden der Seite als Standard ausgewählt ist.


$(document).ready(function()
{
	prepareMenu();
});

Vergessen Sie nicht, die Funktion prepareMenu aufzurufen, wenn die Seite geladen wird. Dies kann einfach erfolgen, indem Sie es wie oben gezeigt im Ready-Ereignis des Dokuments aufrufen.
Jetzt sollte das Menü "Schaltflächen" funktionieren und beim Klicken sollte sich die Liste der Dateien ändern.

Schritt 9 - Gratulieren Sie sich zu einem gut gemachten Job!

Das ist es! Sie sollten jetzt einen funktionierenden Online-Dateispeicher haben.
Denken Sie daran, einen "uploadFolder" zu erstellen und dessen CHMOD zu ändern, um Änderungen zu ermöglichen. Anweisungen hierzu finden Sie im gesamten Web und direkt bei Ihrem Hosting-Anbieter.

Das war ein Tutorial für die Anfänger. Hoffentlich war es tief genug, ohne zu erklärend zu sein.

Vielen Dank für das Lesen und bitte hinterlassen Sie einen Kommentar, wenn Sie Fragen haben.

Folgen Sie uns auf Twitter oder abonnieren Sie den NETTUTS RSS-Feed, um weitere tägliche Tipps und Artikel zur Webentwicklung zu erhalten.