Bilder in den Browser laden per File-API Eigenschaften Quelltext

[Bildschirmfoto]
Bilder in den Browser laden

Wenn Bilder hochgeladen werden sollen, ist es für dem Benutzer wissenswert welche Bilder er überhaupt ausgewählt hat. Diese JavaScript-Funktion zeigt Bilder vor dem Hochladen im Browser an.

Da nach Meinung der Kommentatoren (Tommy) auch eine Upload-Funktion dazugehört, wurde diese von mir hinzugefügt, obwohl wir hier im JavaScript-Bereich sind

Das PHP-Script überprüft die hoch geladenen Dateien (Format, Dateigröße, Abmessungen, etc.) und lädt diese auf dem Server in einem Verzeichnis ab.

Viele weitere Funktionen wurden in den letzten Jahren hinzugefügt, Passwortschutz, Benutzerverzeichnis, Wasserzeichen, Thumbnails u.v.m. Alle Details finden Sie in den Eigenschaften.

Demo (ohne Upload-Funktion)

Eigenschaften

Bilder in den Browser laden per JavaScript Fetch-API.
Passwortschutz
Angabe der Bildtypen (Mimetypen) die hochgeladen werden dürfen.
Überprüfung der maximalen Abmessungen (Breite/Höhe).
Umrechnung der Dateigröße von Bytes in MB (für die Anzeige).
Der Dateiname und die Dateiendung werden in Kleinbuchstaben umgewandelt.
Umlaute und Sonderzeichen im Dateinamen werden gefiltert.
Zu lange Dateinamen werden gekürzt (Länge ist einstellbar).
Überprüfung der Dateiendung (Dateierweiterung).
Ist eine Datei mit gleichen Namen bereits vorhanden, wird die hoch geladene Datei,
mit dem Namen und einer fortlaufenden Zahl umbenannt.

Neu

Dateien per Drag & drop in den Browser ziehen.
Das Hinzufügen mehrerer Benutzernamen und Passwörtern ist möglich.
Für jeden Benutzer wird automatisch ein Bilderverzeichnis angelegt.
Eine .htaccess-Datei im Benutzerverzeichnis erstellen (Optional).
Bilder Seitenverhältnis (Querformat/Hochformat) überprüfen (Optional).

Bildgröße und die Qualität der Bilder anpassen (Optional).
Ein Wasserzeichen hinzufügen (Optional).
Einen Rahmen hinzufügen (Optional).
Das aktuelle Datum mit Uhrzeit hinzufügen (Optional).
Thumbnails (Vorschaubilder) erstellen (Optional).

Quelltext: Bilder in den Browser laden und hochladen Einblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘ ◑

<?php

/*

 * Bilder in den Browser laden und hochladen

 * https://werner-zenk.de - 26.07.2023

 */



// Benutzernamen und Passwörter

$NAME_PASS["user"] = "0000";

// $NAME_PASS["user2"] = "0002";



// Bilderverzeichnis - Mit einem Schrägstrich (Slash) am Ende /

$directory = "images/"; // images/



// Maximale Dateigröße in Bytes

$maxFilesize = 3670016; // (3670016 = 3.5 MB) 1048576 Bytes = 1 MB



// Abmessungen der Bilddatei in Pixel

$maxWidth = 3000; // Maximale Breite (3000)

$maxHeight = 3000; // Maximale Höhe (3000)



// Seitenverhältnis überprüfen (leer! / Querformat / Hochformat)

// Leer lassen, wenn die Datei nicht überprüft werden soll.

$aspectRatio = ""; // leer!



// Bildformate

$formats = [

    "gif" => "image/gif",

    "jpeg" => "image/jpeg",

    "jpg" => "image/jpeg",

    "jpg" => "image/pjpeg", // IE

    "png" => "image/png",

    "webp" => "image/webp",

];



// Größe der Bilder

// Das Format der Bilder muss beachtet werden

// (Seitenverhältnis 16:9 / 4:3 / Hochformat / Querformat)

$imageWidth = 600; // Breite in Pixel (600)

$imageHeight = 338; // Höhe in Pixel (338)



// Ein neues Bild erstellen (true/false)

// Nachfolgende Funktionen sind nur bei "true" möglich!

$image = false; // false



// Alphakanal, Farbpalette, Tranzparenz reduzieren (true/false)

$imageReduce = false; // false



// Qualität der Bilder

$imageJpgQuality = 70; // 70 - JPEG-Format (Werte: 100 - 1)

$imagePngQuality = 0; // 0 - PNG-Format (Werte: 0 - 9)

$imageWebpQuality = 100; // 100 - WEBP-Format (Werte: 100 - 1)



// Bilder mit einem Wasserzeichen markieren (true/false)

$waterSign = false; // false



// Wasserzeichen Bild

// Es muss ein PNG-Dateiformat sein!

$waterSignPic = "logo.png"; // logo.png



// Wasserzeichen Transparenz (0 - 100)

$waterSignTran = 30; // 30



// Position des Wasserzeichens

// 1 = links-oben, 2 = mittig-oben, 3 = rechts-oben,

// 4 = links-unten, 5 = mittig-unten, 6 = rechts-unten, 7 = zentriert,

// 8 = Siehe: "Position manuell setzen"

// Position 1 ist für das Datum / Benutzernamen reserviert!

$waterSignPos = 4; // 4



// Einen Rahmen hinzufügen (true/false)

$border = false; // false



// Rahmenfarbe (Hexadezimal)

$borderColor = "#000000"; // #000000



// Rahmenbreite in Pixel

$borderWith = 2; // 2



// Aktuelles Datum und Uhrzeit einfügen (true/false)

$date = false; // false



// Benutzernamen einfügen (true/false)

$username = false; // false



// Thumbnails erstellen (true/false)

$thumb = false; // false



// Thumbnails-Verzeichnis - Mit einem Schrägstrich am Ende /

$thumbDirectory = "thumbs/";



// Größe der Thumbnails (abhängig vom Format)

$thumbWidth = 150; // Breite in Pixel (150)

$thumbHeight = 100; // Höhe in Pixel (100)



// Qualität der Thumbnails: 0 - 100 (100 = beste Qualität)

$thumbQuality = 50; // 50



// Vorhandene Bilder (gleicher Dateiname) überschreiben (true/false)

$overwrite = false; // false



// .htaccess-Datei im Benutzerverzeichnis erstellen (true/false)

$htaccess = false; // false



// Die entsprechende .htaccess-Konfiguration der Anweisung beim Provider beachten!

$htaccessTxt = '<Limit GET POST>' . PHP_EOL . 'order deny,allow' . PHP_EOL . 'deny from all' . PHP_EOL . '</Limit>';



// Bei Timeout-Problemen den Wert erhöhen

//ini_set("max_execution_time", "250"); // 120



$aborted = 0;

$status = [];

$uploaded = [];



// Dateien gesendet

if (isset($_FILES["file"])) {



    // Benutzername und Passwort überprüfen

    if (

        isset($NAME_PASS[$_POST["username"]]) &&

        $NAME_PASS[$_POST["username"]] == $_POST["password"]

    ) {



        // Verzeichnisnamen aus dem Benutzernamen erzeugen

        $directoryName = mb_strtolower($_POST["username"]);



        // Hier entsprechende Zeichen und Ersatzzeichen (vom ASCII-Zeichensatz) einfügen

        $directoryName = str_replace(["ä", "ö", "ü", "ß", " "], ["ae", "oe", "ue", "ss", "_"], $directoryName);



        // Angegebene Zeichen durchlassen, alle sonstigen filtern

        $directoryName = preg_replace("/[^a-z0-9]/", "", $directoryName);



        // Länge des Verzeichnisnamen eventuell kürzen

        $directoryName = mb_substr($directoryName, 0, 30);



        // Benutzerverzeichnis mit einem Schrägstrich am Ende /

        $userDirectory = $directory . $directoryName . "-uploads/"; // -uploads/



        // Benutzerverzeichnis mit Schreibrechten anlegen

        if (!file_exists($userDirectory)) {

            mkDir($userDirectory, 0704); // 0704



            // .htaccess-Datei im Benutzerverzeichnis erstellen

            if ($htaccess) {

                file_put_contents($userDirectory . ".htaccess", $htaccessTxt);

            }

        }



        // Schleife über alle Dateien

        for ($i = 0; $i < count($_FILES["file"]["name"]); $i++) {



            // Kein Upload-Fehler

            if (

                $_FILES["file"]["name"][$i] != "" &&

                $_FILES["file"]["error"][$i] === UPLOAD_ERR_OK

            ) {



                // Infos über die Bild-Datei holen

                list($tmpWidth, $tmpHeight, $tmpType) = getImageSize($_FILES["file"]["tmp_name"][$i]);

                $path = pathinfo($_FILES["file"]["name"][$i]);

                $filename = $path["filename"];

                $extension = mb_strtolower($path["extension"]);

                $finfo = finfo_open(FILEINFO_MIME_TYPE);

                $finfoMimeType = finfo_file($finfo, $_FILES["file"]["tmp_name"][$i]);

                finfo_close($finfo);



                // Bildformat überprüfen

                if (

                    mb_substr_count($_FILES["file"]["name"][$i], '.') == 1 &&

                    in_array($extension, array_keys($formats)) &&

                    in_array($_FILES["file"]["type"][$i], $formats) &&

                    in_array($finfoMimeType, $formats) &&

                    $tmpWidth > 0 and $tmpHeight > 0

                ) {



                    // Dateigröße überprüfen

                    if ($_FILES["file"]["size"][$i] <= $maxFilesize) {



                        // Abmessungen überprüfen

                        if (

                            $tmpWidth <= $maxWidth &&

                            $tmpHeight <= $maxHeight

                        ) {



                            // Seitenverhältnis überprüfen

                            $ratio = ($aspectRatio == "Querformat" && $tmpHeight > $tmpWidth) ? 'Querformat' : '';

                            $ratio = ($aspectRatio == "Hochformat" && $tmpWidth > $tmpHeight) ? 'Hochformat' : $ratio;

                            if (empty($ratio)) {



                                // Den Dateinamen in UTF-8 konvertieren

                                $filename = iconv("ISO-8859-1", "UTF-8", $filename);



                                // Nur Kleinbuchstaben

                                $filename = mb_strtolower($filename);



                                // Hier entsprechende Zeichen und Ersatzzeichen (vom ASCII-Zeichensatz) einfügen

                                $filename = str_replace(["ä", "ö", "ü", "ß", " "], ["ae", "oe", "ue", "ss", "_"], $filename);



                                // Angegebene Zeichen durchlassen, alle sonstigen filtern

                                $filename = preg_replace("/[^a-z0-9_-]/", "", $filename);



                                // Länge des Dateinamens eventuell kürzen

                                $newname = mb_substr($filename, 0, 45) . "." . $extension;



                                // Vorhandene Bilder (gleicher Dateiname) nicht überschreiben

                                if (!$overwrite) {



                                    // Wenn die Bild-Datei vorhanden ist, hänge eine Zahl an den Dateinamen

                                    // Beispiel: bild.jpg, bild_002.jpg, bild_003.jpg, bild_004.jpg

                                    if (file_exists($userDirectory . $newname)) {

                                        $nr = 2; // Startzahl

                                        do {

                                            $newname = mb_substr($filename, 0, 45) . '_' .

                                            str_pad($nr, 3, "0", STR_PAD_LEFT) . "." . $extension;

                                            $nr++;

                                        } while (file_exists($userDirectory . $newname));

                                    }

                                }



                                // Bild in das Benutzerverzeichnis verschieben

                                move_uploaded_file($_FILES["file"]["tmp_name"][$i], $userDirectory . $newname);



                                // Bild ist im Benutzerverzeichnis vorhanden

                                if (file_exists($userDirectory . $newname)) {

                                    $uploaded[] = $newname;

                                    $status[] = '<li class="ok">&#10004; <em>' . $newname .

                                        '</em> - Wurde erfolgreich hochgeladen.</li>';



                                    // Bild erstellen

                                    if ($image) {

                                        image(

                                            $newname,

                                            $extension,

                                            $userDirectory,

                                            $imageWidth,

                                            $imageHeight,

                                            $imageReduce,

                                            $imageJpgQuality,

                                            $imagePngQuality,

                                            $imageWebpQuality,

                                            $waterSign,

                                            $waterSignPic,

                                            $waterSignPos,

                                            $waterSignTran,

                                            $border,

                                            $borderColor,

                                            $borderWith,

                                            $date,

                                            $username

                                        );

                                    }



                                    // Thumbnail erstellen

                                    if ($thumb) {

                                        thumbnail(

                                            $newname,

                                            $extension,

                                            $userDirectory,

                                            $thumbDirectory,

                                            $thumbWidth,

                                            $thumbHeight,

                                            $thumbQuality

                                        );

                                    }

                                } else {

                                    $aborted++;

                                    $status[] = '<li class="error">&#10008; <em>' . htmlspecialchars($_FILES["file"]["name"][$i]) .

                                        '</em> - Konnte nicht in das Benutzerverzeichnis verschoben werden!</li>';

                                }

                            } else {

                                $aborted++;

                                $status[] = '<li class="error">&#10008; <em>' . htmlspecialchars($_FILES["file"]["name"][$i]) .

                                    '</em> - Erlaubt sind nur Bilder im ' . $ratio . '!</li>';

                            }

                        } else {

                            $aborted++;

                            $status[] = '<li class="error">&#10008; <em>' . htmlspecialchars($_FILES["file"]["name"][$i]) .

                                '</em> - Die Abmessungen des Bildes: ' . $tmpWidth . 'px * ' . $tmpHeight . 'px sind leider zu groß!</li>';

                        }

                    } else {

                        $aborted++;

                        $status[] = '<li class="error">&#10008; <em>' . htmlspecialchars($_FILES["file"]["name"][$i]) .

                            '</em> - Das Bild ist zu groß (maximal ' . $maxFilesize . ' Bytes)!</li>';

                    }

                } else {

                    $aborted++;

                    $status[] = '<li class="error">&#10008; <em>' . htmlspecialchars($_FILES["file"]["name"][$i]) .

                        '</em> - Falsches Dateiformat, nur Bildformate mit den Dateiendungen: ' .

                        (implode(", ", array_unique(array_keys($formats)))) . '!</li>';

                }

            } else {

                $aborted++;

                $status[] = '<li class="error">&#10008; <em>' . htmlspecialchars($_FILES["file"]["name"][$i]) .

                    '</em> - Beim laden des Bildes ist ein Fehler aufgetreten!</li>';

            }

        }

    } else {

        $status[] = '<li class="error">&#10008; Die Anmeldung ist fehlgeschlagen!</li>';

    }



    // Status ausgeben

    echo implode("", $status);



    /*

     * Die Daten in einer Datenbank, Textdatei speichern oder per Mail senden!

    echo $_POST["username"];

    echo implode(", ", $uploaded);

    echo implode(", ", $status);

    echo count($uploaded);

    echo $aborted;

    echo $userDirectory;

     */



    // Verarbeitung beenden

    exit;

}



// Bild erstellen

function image(

    string $filename,

    string $extension,

    string $userDirectory,

    int $imageWidth,

    int $imageHeight,

    bool $imageReduce,

    int $imageJpgQuality,

    int $imagePngQuality,

    int $imageWebpQuality,

    bool $waterSign,

    string $waterSignPic,

    int $waterSignPos,

    int $waterSignTran,

    bool $border,

    string $borderColor,

    int $borderWith,

    bool $date,

    bool $username

) {



    // Erzeuge ein neues Bild aus einer Datei

    $create = newImage($userDirectory, $filename, $extension);



    // Abmessungen reduzieren

    $info = getImageSize($userDirectory . $filename);

    if ($imageWidth && ($info[0] < $info[1])) {

        $imageWidth = ($imageHeight / $info[1]) * $info[0];

    } else {

        $imageHeight = ($imageWidth / $info[0]) * $info[1];

    }



    // Bild mit neuen Abmessungen kopieren

    $image = imageCreateTruecolor($imageWidth, $imageHeight);

    imageCopyResampled($image, $create, 0, 0, 0, 0, $imageWidth, $imageHeight, $info[0], $info[1]);



    // ! Alphakanal, Farbpalette, Tranzparenz reduzieren

    if ($imageReduce) {

        $bga = imageColorAllocateAlpha($image, 0, 0, 0, 127);

        imageColorTransparent($image, $bga);

        imageTrueColortopalette($image, false, 255);

        imageSaveAlpha($image, false);

    }



    // Wasserzeichen hinzufügen

    if (

        $waterSign &&

        file_exists($waterSignPic)

    ) {

        // Erzeugt ein neues Wasserzeichen-Bild aus einer Datei

        $watermarkImg = imageCreateFromPng($waterSignPic);



        // Breite und Höhe des Wasserzeichens

        $wmW = imageSX($watermarkImg);

        $wmH = imageSY($watermarkImg);



        // Position des Wasserzeichen

        $margin = 10; // Pixel Abstand vom Bildrand



        // Position des Wasserzeichen

        switch ($waterSignPos) {

            case 1: // links-oben (Diese Position ist für das Datum und die Uhrzeit / Benutzername reserviert)

                $wmX = $margin;

                $wmY = $margin;

                break;

            case 2: // mittig-oben

                $wmX = round($imageWidth / 2) - round($wmW / 2);

                $wmY = $margin;

                break;

            case 3: // rechts-oben

                $wmX = $imageWidth - $wmW - $margin;

                $wmY = $margin;

                break;

            case 4: // links-unten

                $wmX = $margin;

                $wmY = $imageHeight - $wmH - $margin;

                break;

            case 5: // mittig-unten

                $wmX = round($imageWidth / 2) - round($wmW / 2);

                $wmY = $imageHeight - $wmH - $margin;

                break;

            case 6: // rechts-unten

                $wmX = $imageWidth - $wmW - $margin;

                $wmY = $imageHeight - $wmH - $margin;

                break;

            case 7: // zentriert

                $wmX = round($imageWidth / 2) - round($wmW / 2);

                $wmY = round($imageHeight / 2) - round($wmH / 2);

                break;

            default: // Position manuell setzen

                $wmX = 150; // Position von links

                $wmY = 250; // Position von oben

        }



        // Kopiere das Wasserzeichen mit der Tranzparenz und der Position ins Bild

        imageCopyMerge($image, $watermarkImg, $wmX, $wmY, 0, 0, $wmW, $wmH, $waterSignTran);

    }



    // Einen Rahmen um das Bild zeichnen

    if ($border) {



        // Rahmenfarbe

        sscanf($borderColor, "#%2x%2x%2x", $r, $g, $b);

        $bordercolor = imageColorAllocate($image, $r, $g, $b);



        // Linienstärke setzen

        imageSetThickness($image, $borderWith);



        // Rahmen zeichnen

        imageRectangle($image, 1, 1, $imageWidth - 2, $imageHeight - 2, $bordercolor);

    }



    // Aktuelles Datum und Uhrzeit (links oben) einfügen

    if ($date) {

        $now = date_create("now", timezone_open("Europe/Berlin"));

        $color = imageColorAllocate($image, 240, 240, 240);

        imageString($image, 5, 10, 10, date_format($now, "d.m.Y - H:i"), $color);

        //imageStringUp($image, 5, 10, 170, date_format($now, "d.m.Y - H:i"), $color);

    }



    // Benutzernamen (links oben) einfügen

    if ($username) {

        $xpos = ($date == true) ? 170 : 10;

        $color = imageColorAllocate($image, 240, 240, 240);

        imageString($image, 5, $xpos, 10, $_POST["username"], $color);

    }



    // Überschreiben

    switch ($extension) {

        case 'jpg':

            imageJPEG($image, $userDirectory . $filename, $imageJpgQuality);

            break;

        case 'png':

            imagePNG($image, $userDirectory . $filename, $imagePngQuality);

            break;

        case 'gif':

            imageJPEG($image, $userDirectory . $filename);

            break;

        case 'webp':

            imageJPEG($image, $userDirectory . $filename, $imageWebpQuality);

            break;

    }

    imageDestroy($image);

}



// Thumbnail erstellen

function thumbnail(

    string $filename,

    string $extension,

    string $userDirectory,

    string $thumbDirectory,

    int $thumbWidth,

    int $thumbHeight,

    int $thumbQuality

) {



    // Verzeichnis erstellen

    $directoryThump = $userDirectory . $thumbDirectory;

    if (!file_exists($directoryThump)) {

        mkDir($directoryThump, 0704);

    }



    // Erzeuge ein neues Bild aus einer Datei

    $create = newImage($userDirectory, $filename, $extension);



    // Breite und Höhe des Bildes ermitteln

    $imageW = getImageSize($userDirectory . $filename)[0];

    $imageH = getImageSize($userDirectory . $filename)[1];



    // Thumbnail Abmessungen reduzieren

    if ($imageW > $imageH) {

        $thumbW = $thumbWidth;

        $thumbH = round($imageH / $imageW) * $thumbWidth;

    }

    if ($imageW < $imageH) {

        $thumbH = $thumbHeight;

        $thumbW = round($imageW / $imageH) * $thumbHeight;

    }

    if ($imageW == $imageH) {

        $thumbW = $thumbWidth;

        $thumbH = $thumbHeight;

    }



    // Bild mit neuen Abmessungen kopieren

    $thumbnail = imageCreateTruecolor($thumbWidth, $thumbHeight);

    imageCopyResampled($thumbnail, $create, 0, 0, 0, 0, $thumbW, $thumbH, $imageW, $imageH);



    // Bild schreiben

    imageJPEG($thumbnail, $directoryThump . $filename, $thumbQuality);

    imageDestroy($thumbnail);

}



// Erzeuge ein neues Bild aus einer Datei

function newImage(

    string $userDirectory,

    string $filename,

    string $extension

) {

    switch ($extension) {

        case 'jpg':

            return imageCreatefromJPEG($userDirectory . $filename);

            break;

        case 'png':

            return imageCreatefromPNG($userDirectory . $filename);

            break;

        case 'gif':

            return imageCreatefromGIF($userDirectory . $filename);

            break;

        case 'webp':

            return imageCreatefromWEBP($userDirectory . $filename);

            break;

    }

}

?>

<!DOCTYPE html>

<html lang="de">



<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Bilder in den Browser laden und hochladen</title>



    <style>

        body {

            font-family: Verdana, Arial, Sans-Serif;

            font-size: 1rem;

            color: #656565;

        }



        h1 {

            font-size: 1.8rem;

            font-weight: normal;

            text-align: center;

        }



        form#Form {

            align-items: center;

            display: flex;

            flex-direction: column;

            gap: 0px;

        }



        img.image {

            background: linear-gradient(210deg, #959595, #ffffff 50%, #959595);

            box-shadow: 1px 1px 5px #525252;

            display: inline-block;

            height: 75px;

            outline: solid 1px #d3d3d3;

            padding: 0.3rem;

            transition: all .9s;

        }



        img.image:hover {

            filter: contrast(115%);

            transform: scale(1.3, 1.3);

        }



        div#output {

            display: flex;

            flex-direction: row;

            flex-wrap: wrap;

            gap: 1.2rem;

            justify-content: center;

        }



        ol#status {

            color: #656565;

            font-family: Tahoma, Arial, Sans-Serif;

            font-size: 0.90rem;

            list-style-type: decimal;

            line-height: 23px;

            padding-inline-start: 0px;

        }



        ol#status>li::marker {

            color: #349ddb;

            font-weight: bold;

        }



        li.ok {

            color: #009d27;

            margin: 5px 0 5px 0;

        }



        li.error {

            color: #dd0000;

            margin: 5px 0 5px 0;

        }



        p.formfield {

            margin: 5px;

        }



        label.login {

            color: #656565;

            display: inline-block;

            width: 125px;

        }



        span#max_file_upload {

            color: #ff0000;

            font-size: 1rem;

        }



        label#drop-container {

            align-items: center;

            background-color: #fff;

            border-radius: 10px;

            box-sizing: content-box;

            color: #858585;

            cursor: pointer;

            display: flex;

            flex-direction: column;

            gap: 5px;

            outline: 3px dashed #3db7ff;

            padding: 5px;

            transition: background-color .4s ease-in-out, outline .3s ease-in-out;

        }



        label#drop-container:hover {

            background-color: #f7fbfe;

            outline-color: #0075bb;

        }



        label#drop-container:hover span#drop-title {

            color: #0075bb;

        }



        span#drop-title {

            color: #008fe6;

            font-size: 22px;

            font-weight: normal;

            text-align: center;

            transition: color .2s ease-in-out;

        }



        span#drop-formats {

            font-size: 0.85rem;

            color: #656565;

        }



        input,

        button {

            font-family: Verdana, Arial, Sans-Serif;

            font-size: 1rem;

        }



        button[type="button"] {

            background-color: #349ddb;

            border: none !important;

            border-radius: 10px;

            color: #fff;

            cursor: pointer;

            margin-right: 20px;

            padding: 10px 20px;

            transition: background-color .3s ease-in-out;

        }



        button[type="button"]:hover {

            background-color: #0075bb;

        }



        input[type="text"],

        input[type="password"] {

            border-radius: 10px;

            border: Solid 1px #959595;

            padding: 5px 5px;

        }



        input[type="file"] {

            border: none !important;

            margin: 5px 0 5px 0;

        }



        input[type="file"]::file-selector-button {

            background-color: #349ddb;

            border: none !important;

            border-radius: 10px;

            color: #fff;

            cursor: pointer;

            margin-right: 10px;

            padding: 10px 20px;

            transition: background-color .3s ease-in-out;

        }



        input[type="file"]::file-selector-button:hover {

            background-color: #0075bb;

        }



        :focus-visible {

            outline: solid 1px #349ddb;

        }

    </style>



    <script>

        // Eventhandler setzen

        window.addEventListener("DOMContentLoaded", () => {

            document.querySelector("#file").addEventListener("change", selectFiles);



            // Zurücksetzen

            document.querySelector("#reset").addEventListener("click", () => {

                document.querySelector("#file").value = "";

                document.querySelector("#output").textContent = "";

                document.querySelector("#status").textContent = "";

            });



            // Bilder hochladen

            document.querySelector("#send").addEventListener("click", () => {



                // Pflichtangaben überprüfen

                if (document.querySelector("#Form").reportValidity()) {



                    // Maximale Anzahl der Fotos

                    var max_file_uploads = <?=ini_get('max_file_uploads');?>;

                    max_file_uploads = (max_file_uploads == null ||

                        max_file_uploads == "" ||

                        max_file_uploads == false) ? 25 : max_file_uploads;

                    if (document.querySelector("#file").files.length <= max_file_uploads) {



                        // https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

                        fetch(document.URL, {

                                method: "POST",

                                body: new FormData(document.querySelector("#Form")),

                            })

                            .then((answer) => answer.text())

                            .then((answer) => {

                                document.querySelector("#status").innerHTML = answer;



                                // Formular zurücksetzen

                                document.querySelector("#file").value = "";

                                document.querySelector("#output").textContent = "";

                            });



                    } else {

                        document.querySelector("#file").focus();

                        document.querySelector("#max_file_upload").textContent = `Es dürfen maximal ${max_file_uploads} Fotos auf einmal hochgeladen werden!`;

                    }



                }

            });

        });



        // Laden der Dateien

        const selectFiles = (event) => {

            document.querySelector("#output").textContent = "";

            document.querySelector("#status").textContent = "";

            document.querySelector("#max_file_upload").textContent = "";



            // 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

                    // https://developer.mozilla.org/en-US/docs/Web/API/FileReader

                    var reader = new FileReader();



                    // Ergebnis als data-URL

                    reader.readAsDataURL(event.target.files[i]);



                    // Nach dem laden Bild anzeigen

                    reader.addEventListener("load", (event) => {

                        var img = document.createElement("img");

                        img.setAttribute("class", "image");

                        img.setAttribute("src", event.target.result);

                        document.querySelector("#output").appendChild(img);

                    });



                    // Daten des Bildes ausgeben

                    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString

                    let options = {

                        year: 'numeric',

                        month: 'numeric',

                        day: 'numeric',

                        hour: 'numeric',

                        minute: 'numeric'

                    };

                    let lang = 'de-DE'; // de-DE, en-US

                    let date = new Date(event.target.files[i].lastModified).toLocaleString(lang, options);



                    // Bytes umrechnen

                    // https://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-bytes-to-kb-mb-gb-in-javascript

                    let bytes = event.target.files[i].size;

                    let decimals = 2;

                    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];

                    const k = 1024;

                    const dm = decimals < 0 ? 0 : decimals;

                    const x = Math.floor(Math.log(bytes) / Math.log(k));

                    let size = `${parseFloat((bytes / Math.pow(k, x)).toFixed(dm))} ${sizes[x]}`;



                    // Ausgabe

                    let txt = "<li>" + event.target.files[i].name + " - " + size + " - " + date + " Uhr</li>";

                    document.querySelector("#status").insertAdjacentHTML("beforeend", txt);

                }

            }

        }

    </script>



</head>



<body>



    <h1>Bilder in den Browser laden und hochladen</h1>



    <form id="Form" spellcheck="false">



        <p>

            <label id="drop-container" title="Zum öffnen klicken!">

                <span id="drop-title">Dateien hier ablegen</span>

                <input type="file" name="file[]" id="file" multiple="multiple" accept="image/*" required><br>

                <span id="max_file_upload"></span>

                <span id="drop-formats">Dateiformate: <?=implode(", ", array_unique(array_keys($formats)));?> -

                    Max. Dateigröße: <?=number_format(($maxFilesize / 1024 / 1024), 2, ",", ".");?> MB - <wbr>

                    Max. Abmessungen: <?=$maxWidth . ' x ' . $maxHeight;?> Pixel</span>

            </label>

        </p>



        <div id="output"></div>



        <ol id="status"></ol>



        <p class="formfield">

            <label for="username" class="login">Benutzername:</label>

            <input type="text" name="username" id="username" autocomplete="username" required>

        </p>



        <p class="formfield">

            <label for="password" class="login">Passwort:</label>

            <input type="password" name="password" id="password" autocomplete="current-password" required>

        </p>



        <p class="formfield">

            <button type="button" id="reset">Zurücksetzen</button>

            <button type="button" id="send">Bilder hochladen</button>

        </p>



    </form>



</body>



</html>

➤ Gefällt Ihnen das Skript oder haben Sie einen Fehler gefunden? Dann freue ich mich auf Ihren Kommentar.

Beschränkungen beim hochladen

Das hochladen ist (je nach Provider) auf ca.: 20 Dateien beschränkt, um dies zu ändern, muss die php.ini angepasst werden:

; Maximum number of files that can be uploaded via a single request
max_file_uploads=50

Bei manchen Providern ist es möglich, eine php.ini in das betreffende Verzeichnis abzulegen. Diese Datei wird dann vom Webserver übernommen.

Tipps

Die hochgeladen Bilder können zum Beispiel in einer Diashow angezeigt werden.

Photoalbum: Mit dem Photoalbum (MySQL) können Sie Fotos vom Smartphone direkt auf die Homepage laden. Die Fotos werden automatisch verkleinert und es wird ein Vorschaubild erstellt.