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

--
-- Tabellenstruktur für Tabelle `photos`
--

CREATE TABLE IF NOT EXISTS `photos` (
  `id` bigint(11) NOT NULL AUTO_INCREMENT,
  `photo` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `filetype` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
  `filesize` bigint(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

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.

<?php
require_once "includes/settings.inc.php";
require_once "includes/db.inc.php";
require_once "includes/header.inc.php";

$q_photo = mysql_query("SELECT id, photo, filetype, filesize FROM photos");
while($r_photo = mysql_fetch_array($q_photo))
{
  if(file_exists(thumb_directory.$r_photo['photo']))
  {
?>
<div class="mainBox photoarea<?php echo $r_photo['id'];?>">

  <!-- Löschen Button -->
  <div class="deleteBtn">
    <a href="#" id="<?php echo $r_photo['id']; ?>" class="delPhoto"><img src="images/delete.png"></a>
  </div>

  <!-- Foto -->    
  <div class="photoBox" style="background:url(<?php echo thumb_directory.$r_photo['photo'];?>) no-repeat center;background-size:cover;"></div>

  <!-- Fotoinformationen -->
  <table style="width:auto;">
    <tr>
      <td style="width:60px;" class="txtgray">Typ:</td>
      <td><?php echo $r_photo['filetype'];?></td>
    </tr>
    <tr>
      <td class="txtgray">Größe:</td>
      <td><?php echo $r_photo['filesize'];?></td>
    </tr>
  </table>

</div>
<?php
  } // if
} // while

require_once 'includes/footer.inc.php';
?>

 

includes/db.inc.php

Tragen Sie hier Ihre MySQL-Zugangsdaten ein!

<?php
$DB_SERVER   = "localhost";
$DB_NAME     = "MYSQL DATENBANKNAME";
$DB_USER     = "MYSQL USERNAME";
$DB_PASSWORD = "MYSQL PASSWORT";

$dbconn = mysql_connect($DB_SERVER, $DB_USER, $DB_PASSWORD)or die("Unable to connect to MySQL");
mysql_select_db($DB_NAME, $dbconn);
?>

 

includes/header.inc.php

<!DOCTYPE html>
<html lang="de">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=9">
  <meta charset="utf-8">
  <title></title>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="author" content="Enrico Sadlowski">

  <link rel="stylesheet" type="text/css" media="screen" href="styles/default.css" />

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

  <script type="text/javascript">
    $(function() 
    {
      $('.delPhoto').live("click",function() 
      {
        var ID = $(this).attr("id");
        var dataString = 'photo_id='+ ID;
        if(confirm("Bist Du sicher dass Du dieses Foto entfernen willst?"))
        {
          $.ajax({
            type: "POST",
            url: "includes/ajax/deletePhoto.php",
            data: dataString,
            cache: false,
            success: function(html)
            {
              $(".photoarea"+ID).fadeOut('slow', function() {$(this).remove();});
            }
          });
        }
        return false;
      });
    });
  </script>
</head>

<body>

<div id="wrapper">

 

includes/footer.inc.php

</div><!-- wrapper -->

</body>
</html>

 

includes/settings.inc.php

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

<?php
define("thumb_directory", "uploads/thumbnail/"); // Verzeichnis mit Pfad in dem die Foto Thumbnails gespeichert werden
define("orig_directory", "uploads/originale/");  // Verzeichnis mit Pfad in dem die Original Fotos gespeichert werden
?>

 

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.

<?php
/******************************************************
  Datei:  includes/ajax/deletePhoto.php
  Autor:  Enrico Sadlowski
  Datum:  05.08.2013

  Diese Seite wird durch ein JavaScript aus der Datei 
  editGallery.php aufgerufen und löscht das gewählte 
  Foto aus der Datenbank und vom Server
******************************************************/

require_once("../db.inc.php");

if(isset($_POST['photo_id']))
{
  $id  = mysql_real_escape_string($_POST['photo_id']);

  //Name des zu löschenden Fotos aus Datenbank auslesen
  $q_data = mysql_query("SELECT photo FROM photos WHERE id = ".$id);
  $r_data = mysql_fetch_array($q_data);
  $photoname = $r_data['photo'];

  //Thumbnail vom Server löschen
  if(file_exists("../../".thumb_directory.$photoname)) unlink("../../".thumb_directory.$photoname);

  //Originalfoto vom Server löschen
  if(file_exists("../../".orig_directory.$photoname)) unlink("../../".orig_directory.$photoname);

  //Foto aus Datenbank löschen
  $sql = "DELETE FROM photos WHERE id=".$id;
  mysql_query($sql);
}
?>

 

styles/default.css

table tr td{padding:7px 0 0 0; border-color: #eee;}
table { *border-collapse: collapse; /* IE7 and lower */ border-spacing: 0; width: 100%; }

#wrapper{ margin:0 auto 0 auto; padding:0px; width:950px; background: blue; }

.mainBox { float: left; padding: 5px; margin:10px; border: 1px solid silver; width:auto;}
.photoBox { margin: 7px; width: 165px; height: 140px; float: left;}
.deleteBtn { z-index: 10; position: absolute; cursor: pointer;}

.txtgray { color: silver; }

 

 

Download des kompletten Projekts

Fotos ohne refresh vom Server löschen

Über Enrico S.

Programmierer, Webdesigner, Grafiker, Blogger, Screencaster, Arduino- und eMobility Enthusiast. nefilim3006 ist auch bei Google+ vertreten

Kommentare geschlossen.