Nahrávání souborů přes webovou stránku má dvě části:
- samotné zobrazení formulářového prvku pro nahrání souboru(ů) – jednoduchý HTML kód
- 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.