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.