Nahrávání souborů přes webovou stránku má dvě části:

  1. samotné zobrazení formulářového prvku pro nahrání souboru(ů) – jednoduchý HTML kód
  2. zpracování souboru(ů) a uložení na server – složitější část (PHP script)

Dnes (rok 2024) můžeme využít některý z nástrojů chytré inteligence, abychom si nechali kompletní fungování vygenerovat. Např. Copilot od Microsoftu. Pro vygenerování zadáme např. požadavek v tomto provedení:

„Vytvoř mi PHP script na nahrávání obrázků a jejich zobrazení. Script nesmí používat databázi. Vložené fotografie poskládej do galerie tak, aby měly náhledy rozměr 200px x 200px. Využij na galerii JavaScript, např. Lightbox2 nebo podobné.“

Copilot vygeneroval např. tento kód:

<?php
// Nastavení cílového adresáře pro nahrané soubory
$target_dir = "uploads/";
if (!is_dir($target_dir)) {
    mkdir($target_dir, 0777, true);
}

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
    $uploadOk = 1;
    $imageFileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));

    // Kontrola, zda je soubor skutečně obrázek
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if ($check !== false) {
        echo "Soubor je obrázek - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "Soubor není obrázek.";
        $uploadOk = 0;
    }

    // Kontrola, zda soubor již existuje
    if (file_exists($target_file)) {
        echo "Soubor již existuje.";
        $uploadOk = 0;
    }

    // Povolení pouze určitých formátů souborů
    if ($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif") {
        echo "Povoleny jsou pouze JPG, JPEG, PNG a GIF soubory.";
        $uploadOk = 0;
    }

    // Kontrola, zda je $uploadOk nastaven na 0 kvůli chybám
    if ($uploadOk == 0) {
        echo "Soubor nebyl nahrán.";
    } else {
        if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
            echo "Soubor " . htmlspecialchars(basename($_FILES["fileToUpload"]["name"])) . " byl úspěšně nahrán.";
        } else {
            echo "Při nahrávání souboru došlo k chybě.";
        }
    }
}

// Zobrazení nahraných obrázků
$files = glob($target_dir . "*.{jpg,jpeg,png,gif}", GLOB_BRACE);
foreach ($files as $file) {
    echo '<a href="' . $file . '" data-lightbox="gallery"><div class="thumbnail" style="background-image: url(' . $file . ');"></div></a>';
}
?>

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <title>Nahrávání obrázků</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css" rel="stylesheet">
    <style>
        .thumbnail {
            width: 200px;
            height: 200px; /* Poměr stran 1:1 */
            background-size: cover;
            background-position: center;
            margin: 10px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <form action="" method="post" enctype="multipart/form-data">
        Vyberte obrázek k nahrání:
        <input type="file" name="fileToUpload" id="fileToUpload">
        <input type="submit" value="Nahrát obrázek" name="submit">
    </form>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"></script>
</body>
</html>

Někdy je robotem vygenerován jiný kód nebo také chybný. Zkuste si sami postupně zadávat různé požadavky a sledovat výsledek vygenerovaného kódu.

image_pdfPDF