Bilder in den Browser laden per File API

[Bildschirmfoto / Grafik]
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.

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.

Demo

Eigenschaften (PHP)

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 Zufallszahl umbenannt.

Quelltext: Bilder in den Browser laden per File API Ausblenden ❘ Kopieren ❘ Zeilen ❘ ◑

<?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;

}

?>

<!DOCTYPE html>

<html lang="de">



<head>

    <meta charset="utf-8">

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



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

        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;

        }



        input[type="file"] {

            border: 0;

            outline: Dashed 1.4px Royalblue;

            padding: 25px;

            width: 450px;

            margin: 5px 0 5px 0;

        }

    </style>



</head>



<body>



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



    <form id="Form">



        <p>

            <label>Bilder auswählen oder per <q><em>Drag and drop</em></q> einfügen: <br>

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

Tipp

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