Fotos vom Server löschen ohne die Seite neu zu laden

In diesem Beitrag erkläre ich, wie man Fotos vom Server löschen kann ohne dass die Seite danach neu geladen werden muss. Um das Zusammenspiel zwischen php, mysql und javascript zu demonstrieren, werden Fotos aus der Datenbanktabelle „photos“, in der die Informationen der Bilder, die zuvor auf den Server geladen wurden, ausgelesen. Diese Informationen bestehen aus dem Namen des Fotos, dem Dateityp und der Dateigröße.

Fotos vom Server löschen

 

 

Vorbereitung

Fotos auf dem Server speichern

Laden Sie ein paar Fotos in das Verzeichnis „uploads/thumbnail“.
Die Fotos sollten, einem Thumbnail entsprechend, nicht zu groß sein.
Ich habe die Fotos in einer Größe von 300 x 200px gespeichert.

 

Anlegen der Datenbanktabelle

Fügen Sie nun für jedes Fotos dass Sie zuvor auf den Server geladen haben, einen Eintrag in die Datenbank ein. Geben Sie dazu auf jeden Fall den Namen der Fotos inklusive der Dateierweiterung, jedoch ohne den Pfad ein. Optional können Sie noch den Dateityp und die Dateigröße der einzelnen Bilder eingeben.

Die zwei zuvor genannten Schritte können Sie sich sparen wenn Sie für den Upload und das eintragen der Fotodaten in die Datenbank ein zusätzliches Script verwenden.

 

editGallery.php

Diese Datei ließt alle Informationen aus der Datenbanktabelle „photos“ aus.

Zuerst wird geprüft ob das Foto mit dem, aus der Datenbank ausgelesenen Fotonamen, im Verzeichnis, das in der Variablen „thumb_directory“ in der Datei „includes/settings.inc.php“ definiert wurde, vorhanden ist. Ist das Foto vorhanden, dann wird für jedes gefundene Foto ein div mit einer eindeutigen Bezeichnung erzeugt.

Die Klasse „mainBox“ dient lediglich der Formatierung der Box damit das Ganze gut aussieht. Das eigentlich Wichtige ist die Klasse „photoarea“ mit der angehängten id des Photos. In diesem div werden nun das Foto und ein Löschen Button dargestellt.

Wenn Sie nun auf den Button klicken, wird die id des Photos an die JavaScript Funktion „delPhoto“, die im header der Datei angegeben wurde, aufgerufen. Es erscheint eine Sicherheitsabfrage ob das Foto wirklich gelöscht werden soll. Wenn diese Frage bestätigt wird, wird die Datei „includes/ajax/deletePhoto.php“ aufgerufen. Diese Datei ließt nun den Namen des Fotos, dessen id übergeben wurde, aus und prüft erneut ob das Foto auf dem Server vorhanden ist.

Anschließend werden das Foto aus dem Thumbnail Ordner und das Originale Foto aus dem Ordner „originale“ gelöscht. Zum Schluss wird der Eintrag aus der Datenbanktabelle „photos“ entfernt. Das zu löschende Foto wird von der Website mit einem Effekt ausgeblendet und das nächste Foto rückt an dessen Stelle.

 

includes/db.inc.php

Tragen Sie hier Ihre MySQL-Zugangsdaten ein!

 

includes/header.inc.php

 

includes/footer.inc.php

 

includes/settings.inc.php

In dieser Datei können Sie die Pfadangaben zu Ihren Fotos anpassen.

 

includes/ajax/deletePhoto.php

Dieses Script wird durch die im header angegebene JavaScript Funktion „delPhoto“ aufgerufen und sorgt letztendlich für das löschen der Bilder vom Server und das anschließende entfernen des Eintrags aus der Datenbank.

 

styles/default.css

 

 

Download des kompletten Projekts

Fotos ohne refresh vom Server löschen

Über Enrico S.

Programmierer, Webdesigner, Grafiker, Blogger, Screencaster, Arduino- und eMobility Enthusiast.

Kommentare geschlossen.