diedVIPs

html knowhow

Bilder auf Server hochladen










Bilder auf den Server hochladen

So sieht´s aus

Bilder auf den Server laden


Dateiformate: png, jpg, jpeg, gif - Max. Dateigröße: 1,00 MB
Max. Abmessungen: 800 x 800 Pixel

Quellcode (Speichern als .php)
 <?php
/*
* Bilder hochladen
*/


// Passwort
$passwort = "0000";

// Bilderverzeichnis
$verzeichnis = "bilder/"; // Schreibrechte beachten!

// Maximale Dateigröße in Bytes
$maxD = 1048576; // 1048576 Bytes = 1 MB

// Abmessungen der Bilddatei in Pixel
$maxB = 600; // Max. Breite
$maxH = 500; // Max. Höhe

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


// Dateien wurden gesendet
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($width, $height) = getImageSize($_FILES["datei"]["tmp_name"][$i]);
$path = pathinfo($_FILES["datei"]["name"][$i]);
if (in_array(strtolower($path["extension"]), array_keys($bildformate)) &&
in_array($_FILES["datei"]["type"][$i], $bildformate) &&
$width > 0 AND $height > 0) {

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

// Abmessungen überprüfen
if ($width <= $maxB &&
$height <= $maxH) {

// Den Dateinamen ermitteln
$dateiname = utf8_decode($path["filename"]);

// Umlaute ersetzen und Dateiname kürzen (Optional)
$dateiname = substr(preg_replace("/[^a-z0-9_-]/", "", strtolower(strtr($dateiname, "äöüß", "aous"))), 0, 45);

// Wenn die Datei vorhanden ist, Dateiname umbenennen
if (file_exists($verzeichnis . $dateiname . '.' . strtolower($path["extension"]))) {
$dateiname .= '_' . rand(1, 9999);
}
$dateiname .= '.' . strtolower($path["extension"]);

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

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

<html>
<head>
<script>
// Eventhandler setzen
window.addEventListener("load", function () {
document.getElementById("datei").addEventListener("change", waehleDateien);
document.getElementById("senden").addEventListener("click", bilderHochladen);
});
function waehleDateien(event) {
// Alte Auswahl löschen
document.getElementById("ausgabe").innerHTML = "";
document.getElementById("status").innerHTML = "";
// Eine Schleife um die Bilder auszulesen
for (var i = 0; i < event.target.files.length; i++) {
if (event.target.files[i]) {
// Der FileReader übernimmt das Laden der Datei
var leser = new FileReader();
// Eventhandler setzen
leser.addEventListener("load", bildGeladen);
// 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);}
// 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>

<style type="text/css">
img.bild {width: 10%;background: White;padding: 0.5rem;outline: Solid Thin Lightgrey;box-shadow: 1px 1px 10px #ADADAD;display: Inline-Block;margin-right: 0.8rem;}
div#ausgabe {background-color: #E4E4E4;padding: 0.5rem;}
div#status {background-color: #F0F0F0;padding: 0.5rem;}
p.fehler {color: #DD0000;}
</style
<head>

<body >
<form id="Form">
<p>
<label>Bilder auswählen:
<input type="file" name="datei[]" id="datei" multiple="multiple" accept="image/*" required="required"></label><br>
<small>Dateiformate: <?=implode(", ", array_unique(array_keys($bildformate)));?> -
Max. Dateigröße: <?=number_format(($maxD / 1024 / 1024), 2, ",", ".");?> MB<br>
Max. Abmessungen: <?=$maxB . ' x ' . $maxH;?> Pixel</small>
</p>
<div id="ausgabe"></div>
<p><label>Passwort: <input type="password" name="passwort" required="required"></label>
<input type="button" value="hochladen" id="senden"></p>
<div id="status"></div>
</form>

</body>
</html>


Die hochgeladenen Bilder als manuelle Diashow anzeigen

So sieht´s aus

Diashow manuell


Quellcode (Speichern als .php)
<?php
$verzeichnis = "bilder/"; // Bilderverzeichnis
if (isset($_GET["show"])) {
foreach (array_slice(scanDir($verzeichnis), 2) as $datei) {
$path = pathinfo($datei);
if (in_array($path["extension"], ["png", "jpg", "gif"])) {
$arr[] = ['names'=>$verzeichnis . $datei];
} }
echo json_encode($arr);
exit;
}
?>
<html>

<head>
<script>
window.addEventListener("load", function () {
var xhr = new XMLHttpRequest();
xhr.open("GET", document.URL+"?show");
xhr.send(null);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var obj = JSON.parse(xhr.responseText);
var len = obj.length;
document.getElementById("dummy").src = obj[0].names;
document.getElementById("number").innerHTML = 1;}
document.getElementById("prev").addEventListener("click", function(){blaettern(-1, obj, len)});
document.getElementById("next").addEventListener("click", function(){blaettern(1, obj, len)});
document.getElementById("dummy").addEventListener("click", function(){blaettern(1, obj, len)});}});
// Blättern
var aktuell = 0;
function blaettern(richtung, obj, len) {
if (aktuell+richtung >= 0 && aktuell+richtung < len) {
aktuell += richtung;
document.getElementById("dummy").src = obj[aktuell].names;}
else if (aktuell+richtung >= len) {aktuell = 0;
document.getElementById("dummy").src = obj[aktuell].names;}
else if (aktuell+richtung < 0) {aktuell = obj.length-1;document.getElementById("dummy").src = obj[aktuell].names;}
document.getElementById("number").innerText = aktuell+1;}
</script>

<style type="text/css">
body {
font-family: Verdana, Arial, Sans-Serif;}
h2 {font-weight: Normal;}
figure img#dummy {max-width: 100%;height: Auto;display: Block;margin: 1rem Auto 1rem Auto;box-shadow: 1px 1px 5px #888888;border: Solid 1px #000000;}
span#prev, span#next {font-size: 1.2rem;font-weight: Bold;color: #000000;background-color: #FFFFFF;padding: 5px 10px 5px 10px;
border: Solid 1px #000000;border-radius: 20px;box-shadow: 1px 1px 4px 0px #777777;cursor: Pointer;}
span#prev:hover, span#next:hover {color: #FFFFFF;background-color: #777777;border: Solid 1px #FFFFFF;}
span#number {display: Inline-Block;width: 2rem;text-shadow: 1px 1px 4px #777777;}
figcaption#navigation {text-align: Center;}
</style
</head>

<body >
<h2>Diashow manuell</h2>
<figure>
<img src="" id="dummy">
<figcaption id="navigation">
<span id="prev" title="Zurück">&lt;</span>
<span id="number">1</span>
<span id="next" title="Weiter">&gt;</span>
</figcaption>
</figure>
</body>

</html>


Die hochgeladenen Bilder als automatische Diashow anzeigen

So sieht´s aus

Quellcode (Speichern als .php)
<?php
$verzeichnis = "bilder/"; // Bilderverzeichnis
if (isset($_GET["show"])) {
foreach (array_slice(scanDir($verzeichnis), 2) as $datei) {
$path = pathinfo($datei);
if (in_array($path["extension"], ["png", "jpg", "gif"])) {
$arr[] = ['names'=>$verzeichnis . $datei];
} }
echo json_encode($arr);
exit;
}
?>
<html>

<head>
<script>
window.addEventListener("load", function () {
var xhr = new XMLHttpRequest();
xhr.open("GET", document.URL+"?show");
xhr.send(null);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var obj = JSON.parse(xhr.responseText);
var len = obj.length;
document.getElementById("dummy").src = obj[0].names;
document.getElementById("number").innerHTML = 1;}
document.getElementById("prev").addEventListener("click", function(){blaettern(-1, obj, len)});
document.getElementById("next").addEventListener("click", function(){blaettern(1, obj, len)});
document.getElementById("dummy").addEventListener("click", function(){blaettern(1, obj, len)});}});
// Blättern
var aktuell = 0;
function blaettern(richtung, obj, len) {
if (aktuell+richtung >= 0 && aktuell+richtung < len) {
aktuell += richtung;
document.getElementById("dummy").src = obj[aktuell].names;}
else if (aktuell+richtung >= len) {aktuell = 0;
document.getElementById("dummy").src = obj[aktuell].names;}
else if (aktuell+richtung < 0) {aktuell = obj.length-1;document.getElementById("dummy").src = obj[aktuell].names;}
document.getElementById("number").innerText = aktuell+1;}
</script>

<style type="text/css">
body {
font-family: Verdana, Arial, Sans-Serif;}
h2 {font-weight: Normal;}
figure img#dummy {max-width: 100%;height: Auto;display: Block;margin: 1rem Auto 1rem Auto;box-shadow: 1px 1px 5px #888888;border: Solid 1px #000000;}
span#prev, span#next {font-size: 1.2rem;font-weight: Bold;color: #000000;background-color: #FFFFFF;padding: 5px 10px 5px 10px;
border: Solid 1px #000000;border-radius: 20px;box-shadow: 1px 1px 4px 0px #777777;cursor: Pointer;}
span#prev:hover, span#next:hover {color: #FFFFFF;background-color: #777777;border: Solid 1px #FFFFFF;}
span#number {display: Inline-Block;width: 2rem;text-shadow: 1px 1px 4px #777777;}
figcaption#navigation {text-align: Center;}
</style
</head>

<body >
<h2>Diashow manuell</h2>
<figure>
<img src="" id="dummy">
<figcaption id="navigation">
<span id="prev" title="Zurück">&lt;</span>
<span id="number">1</span>
<span id="next" title="Weiter">&gt;</span>
</figcaption>
</figure>
</body>

</html>












Kontakt    Datenschutz   Impressum