Jak napisać skrypt do uploadowania zdjęć

Masz dość ręcznego przesyłania zdjęć na serwer? A może chcesz dodać funkcję uploadu zdjęć do swojej strony? Niezależnie od motywacji, stworzenie własnego skryptu do uploadowania zdjęć wcale nie jest takie trudne, jak mogłoby się wydawać. W tym artykule pokażę Ci, jak krok po kroku napisać skrypt do przesyłania zdjęć przy użyciu HTML, PHP i JavaScript. Nawet jeśli dopiero zaczynasz przygodę z programowaniem, dasz radę!

Co będziemy robić?

Nasz skrypt:

Pozwoli użytkownikowi wybrać zdjęcie z komputera.
Zabezpieczy upload przed nieautoryzowanymi plikami.
Przechowa zdjęcia na serwerze w określonym folderze.
Wyświetli komunikat o sukcesie lub błędzie.

Czego potrzebujesz?

Zanim zaczniemy, upewnij się, że masz:

Serwer obsługujący PHP (np. XAMPP, WAMP, lub hosting z PHP).
Podstawową wiedzę o HTML i PHP.
Edytor tekstu (np. VS Code lub Notepad++).

Krok 1: Tworzymy formularz HTML

Pierwszy krok to stworzenie prostego formularza, który pozwoli użytkownikowi wybrać zdjęcie do przesłania. Kod HTML wygląda tak:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Jak stworzyć skrypt do uploadowania zdjęć? Przeczytaj nasz poradnik krok po kroku i naucz się tworzyć swój własny system przesyłania plików.">
    <title>Upload zdjęć</title>
</head>
<body>
    <h1>Prześlij swoje zdjęcie</h1>
    <form action="upload.php" method="POST" enctype="multipart/form-data">
        <label for="file">Wybierz zdjęcie:</label>
        <input type="file" name="file" id="file" accept="image/*" required>
        <button type="submit">Prześlij</button>
    </form>
</body>
</html>

Co tu się dzieje?

action="upload.php" – formularz wysyła dane do pliku upload.php, który zajmie się obróbką plików.
enctype="multipart/form-data" – bez tego przesyłanie plików nie zadziała!
accept="image/*" – ograniczamy wybór do plików graficznych.

Krok 2: Tworzymy plik PHP do obsługi uploadu

Teraz napiszemy kod PHP, który odbierze przesłane zdjęcie, sprawdzi je i zapisze na serwerze.

Otwórz nowy plik o nazwie upload.php i wklej poniższy kod:

<?php
// Sprawdź, czy przesłano plik
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Ścieżka do folderu, gdzie zapisujemy pliki
    $uploadDir = 'uploads/';
    
    // Upewnij się, że folder istnieje
    if (!is_dir($uploadDir)) {
        mkdir($uploadDir, 0777, true);
    }

    // Pobierz informacje o pliku
    $file = $_FILES['file'];
    $fileName = basename($file['name']);
    $fileTmpName = $file['tmp_name'];
    $fileSize = $file['size'];
    $fileError = $file['error'];
    $fileType = $file['type'];

    // Sprawdź typ pliku
    $allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
    if (!in_array($fileType, $allowedTypes)) {
        die("Nieobsługiwany format pliku! Dozwolone: JPEG, PNG, GIF.");
    }

    // Sprawdź rozmiar pliku (maks. 2 MB)
    if ($fileSize > 2 * 1024 * 1024) {
        die("Plik jest za duży! Maksymalny rozmiar to 2 MB.");
    }

    // Przenieś plik do docelowego folderu
    $fileDestination = $uploadDir . $fileName;
    if (move_uploaded_file($fileTmpName, $fileDestination)) {
        echo "Plik został przesłany pomyślnie! Znajdziesz go tutaj: $fileDestination";
    } else {
        echo "Wystąpił problem z przesłaniem pliku.";
    }
} else {
    echo "Nie przesłano żadnego pliku.";
}
?>

Co tu się dzieje?

Weryfikacja folderu: Sprawdzamy, czy istnieje folder uploads. Jeśli nie, tworzymy go.
Weryfikacja typu: Dozwalamy tylko na pliki JPEG, PNG i GIF.
Weryfikacja rozmiaru: Akceptujemy pliki o wielkości do 2 MB.
Przeniesienie pliku: Funkcja move_uploaded_file() zapisuje plik w folderze docelowym.

Krok 3: Dodajemy zabezpieczenia

Upload plików może być niebezpieczny, jeśli nie zabezpieczysz odpowiednio swojego skryptu. Dodamy kilka dodatkowych warstw ochrony:

Unikaj kolizji nazw plików

Jeśli użytkownicy przesyłają pliki o tych samych nazwach, ostatni przesłany plik nadpisze poprzedni. Aby tego uniknąć, dodajemy unikalny identyfikator do nazwy pliku:

$fileName = uniqid('', true) . "_" . $fileName;

Walidacja pliku po rozszerzeniu

Nie ufaj samemu MIME type! Sprawdź również rozszerzenie pliku:

$fileExt = strtolower(pathinfo($fileName, PATHINFO_EXTENSION));
$allowedExts = ['jpg', 'jpeg', 'png', 'gif'];

if (!in_array($fileExt, $allowedExts)) {
    die("Nieobsługiwane rozszerzenie pliku!");
}

Krok 4: Upiększamy interfejs użytkownika

Chcesz, żeby formularz wyglądał lepiej? Dodaj odrobinę CSS:

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        margin: 0;
    }
    form {
        background: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    input, button {
        display: block;
        margin: 10px 0;
    }
    button {
        background-color: #007BFF;
        color: white;
        padding: 10px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    button:hover {
        background-color: #0056b3;
    }
</style>

Krok 5: Testujemy!

Wrzuć oba pliki (index.html i upload.php) na serwer.
Otwórz przeglądarkę, przejdź do formularza i spróbuj przesłać zdjęcie.
Sprawdź, czy plik pojawia się w folderze uploads.

Stworzenie skryptu do uploadowania zdjęć to doskonały sposób, aby wzbogacić swoją stronę internetową. Pamiętaj jednak o zabezpieczeniach, aby uniknąć problemów związanych z nieautoryzowanymi plikami. Jeśli chcesz, możesz rozbudować ten projekt, np. dodając podgląd przesłanego zdjęcia czy integrację z bazą danych.