Tutorial Bilder mit Browser sehen und hochladen

von: Werner-Zenk.de - Version vom 13.08.2016

Mit diesem Skript kann man komfortabel Bilder in einer Vorschau direkt am Server sehen, die man im Anschluss in ein am Server angelegtes Verzeichnis hochladen kann.

Ich habe hier noch eine gleichzeitige Anzeige der so hoch geladenen Bilder mit diesem Skript eingebaut, das ist also bei dem Skript und dem folgenden Tutorial nicht mit dabei. Guckt Euch für ein weiteres Beispiel zur Anzeige auch diese Diashow vom Werner an.

Stellt die Seite, auf der Ihr die PHP-Skripte einbaut, auf die Dateierweiterung .php und den Zeichensatz “UTF-8”.

> Menü oben > Bearbeiten > Benutzerdefinierte Namen > Dateierweiterung > .php wählen

Kopiert dieses PHP-Skript an den Beginn Eurer Seite.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Beginn der Seite” (keine Leerzeile oben lassen)

Tragt Euer Administrator-Passwort ein und passt eventuell das Verzeichnis zum Hochladen der Bilder an - hier “bilder”, welches sich bei mir im gleichen Verzeichnis wie die Seite, auf der ich das Skript eingebaut habe, befindet. Hier wurde die maximale Bildgröße auf 1MB und die Bildabmessungen auf 900px beschränkt, was Ihr natürlich auch individuell anpassen könnt.

<?php
// Werner-Zenk.de
// Bilder Vorschau und auf Server laden
// Version vom 13.08.2016

// Passwort hier eintragen
$passwort = "0000";

// Bilderverzeichnis - bitte anlegen oder anpassen
$verzeichnis = "bilder/"; // Schreib.- und Leserechte beachten!

// Maximale Dateigröße
$max_groesse = 1048576; // Größe in Bytes (1048576 Bytes = 1 MB)

// Abmessungen der Bilddatei
$max_abmessungenB = 900; // Max. Abmessung der Breite in Pixel
$max_abmessungenH = 900; // Max. Abmessung der Höhe in Pixel

// Bildtypen
$bildformate = [
 "png" => "image/png",
 "jpg" => "image/jpeg",
 "jpg" => "image/pjpeg", // IE
 "jpeg" => "image/jpeg",
 "gif" => "image/gif"];

if (isset($_FILES["datei"])) {
 $status = [];

 // Passwort überprüfen
 if ($_POST["passwort"] === $passwort) {

  // Schleife über alle Dateien
  for ($i = 0; $i < count($_FILES["datei"]["name"]); $i++) {

   // Kein Upload-Fehler
   if ($_FILES["datei"]["name"][$i] != "" &&
       $_FILES["datei"]["error"][$i] === UPLOAD_ERR_OK) {

    // Bildtyp überprüfen
    list($breite, $hoehe) = getImageSize($_FILES["datei"]["tmp_name"][$i]);
    if (in_array($_FILES["datei"]["type"][$i], $bildformate) &&
       $breite > 0 && $hoehe > 0) {

     // Dateigröße überprüfen
     if ($_FILES["datei"]["size"][$i] <= $max_groesse) {

      // Abmessungen überprüfen
      if ($breite <= $max_abmessungenB &&
          $hoehe <= $max_abmessungenH) {

       // Bild in das Verzeichnis verschieben
       move_uploaded_file($_FILES["datei"]["tmp_name"][$i], $verzeichnis . $_FILES["datei"]["name"][$i]);

       // Bild ist im Verzeichnis vorhanden
       if (file_exists($verzeichnis . $_FILES["datei"]["name"][$i])) {
        $status[] = "<p>" . $_FILES["datei"]["name"][$i] . " - Wurde erfolgreich hochgeladen.</p>";
       }
      }
      else {
       $status[] = "<p>" . $_FILES["datei"]["name"][$i] . " - Die Abmessungen des Bildes: " . $breite . "px * " . $hoehe . "px sind
 leider zu groß!</p>";
      }
     }
     else {
      $status[] = "<p>" . $_FILES["datei"]["name"][$i] . " - Das Bild ist leider zu groß (max: " . $max_groesse . " Bytes)!</p>";
     }
    }
    else {
     $status[] = "<p>" . $_FILES["datei"]["name"][$i] . " - Es wurde ein falsches Dateiformat ausgewählt!</p>";
    }
   }
   else {
    $status[] = "<p>" . $_FILES["datei"]["name"][$i] . " - Beim laden des Bildes ist ein Fehler aufgetreten!</p>";
   }
  }
 }
 else {
  $status[] = "<p style='color: red; font-weight: bold;'>Das Passwort ist falsch!</p>";
 }
 echo implode("", $status);
 exit;
}
?>

Fügt das JavaScript unten ebenfalls in das Layout Eurer Seite “Zwischen Head Tags” ein.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags

<script>
  // Eventhandler setzen
  window.addEventListener("load", function () {
   document.getElementById("datei").addEventListener("change", waehleDateien);
   document.getElementById("senden").addEventListener("click", bilderHochladen);
  });

  function waehleDateien(event) {
   delAuswahl(); // Alte Auswahl loeschen
   // Eine Schleife um die Bilder auszulesen
   for (var i = 0; i < event.target.files.length; i++) {
    if (event.target.files[i]) {
     // Der FileReader uebernimmt das Laden der Datei
     var leser = new FileReader();
      // Eventhandler setzen
      leser.addEventListener("load", bildGeladen); // Laden erfolgreich
      // Ergebnis als data-URL
      leser.readAsDataURL(event.target.files[i]);
     }
    }
   }

  // Nach dem laden Bild anzeigen
  function bildGeladen(event) {
   var img = document.createElement("img");
   img.setAttribute("class", "bild");
   img.setAttribute("src", event.target.result);
   document.getElementById("ausgabe").appendChild(img);
  }

  // Alte Auswahl/Anzeige loeschen
  function delAuswahl() {
   var element = document.getElementById("ausgabe");
   while (element.firstChild) {
    element.removeChild(element.firstChild);
   }
   document.getElementById("status").innerHTML = "";
  }

  // Bilder hochladen
  function bilderHochladen() {
   var xhr = new XMLHttpRequest();
   xhr.open("POST", document.URL);
   xhr.send(new FormData(document.getElementById("Form")));
   xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
     document.getElementById("status").innerHTML = xhr.responseText;
    }
   }
  }
</script>

Weiterhin könnt Ihr dem Skript eine CSS geben. Ich habe meine CSS hier wie folgt ein wenig vom Original abgeändert.

Fügt diese CSS ebenso “Zwischen Head Tags” des Layouts ein.

<style>
  img.bild {
   width: 10%;
   background: White;
   padding: 0.3rem;
   outline: #888888;
   display: Inline-Block;
   margin-right: 0.8rem;
  }

  div#ausgabe {
   background-color: #43ADC7;
   color: #E2E2E2;
   border-radius: 5px;
   box-shadow: 5px 5px 5px #888888;
   padding: 10px;
  }

  div#status {
   color: #43ADC7;
   line-height: 21px;
  }
</style>

Für die Vorschau der ausgewählten Bilder und den Button zum Hochladen fügt Ihr dieses Formular in den HTML-Code Editor  eines Textfeldes ein.

> Textfeld doppelklicken (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button “HTML” > Code einfügen

            <form id="Form">
                <p>
                 <label>Bilder auswählen:
                 <input type="file" name="datei[]" id="datei" multiple="multiple" accept="image/*" required="required"></label>
                </p>
                <div id="ausgabe">Anzeige der ausgewählten Bilder<br>
                </div>
                <br>
                <p><label>Passwort: <input type="password" name="passwort" required="required"></label>
                <input type="button" value="Hochladen" id="senden"></p>
                <div id="status">Status</div>
            </form>

Nun könnt Ihr Bilder direkt und ohne FTP-Programm in ein Verzeichnis auf Euren Server hochladen, um diese z.B. Freunden zur Verfügung zu stellen oder einen Link auf die dort hoch geladenen Bilder zu setzen.

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik