NOF-Forum | Referenzen | Kontakt | Impressum | Sitemap
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ß!