Prosty formularz z uploadem zdjęć w PHP

Cześć! Dziś pokażę Ci, jak w prosty sposób stworzyć formularz do przesyłania zdjęć w PHP. Jeśli kiedykolwiek myślałeś, że to trudne, przygotuj się na miłe zaskoczenie! Wszystko, co potrzebujesz, to podstawowa znajomość PHP, trochę HTML i odrobina cierpliwości. No to co? Zaczynamy!

Dlaczego upload zdjęć w PHP?

Zacznijmy od tego, dlaczego to w ogóle jest przydatne. Funkcja uploadu zdjęć może przydać się w wielu miejscach: na stronach z formularzami kontaktowymi, w panelach administracyjnych czy w aplikacjach do zarządzania treściami. To świetny sposób, aby użytkownicy mogli wzbogacić Twoją stronę o swoje zdjęcia.

Co stworzymy?

Stworzymy prosty formularz HTML do przesyłania zdjęć i skrypt PHP, który:

  1. Zapisze zdjęcie na serwerze.
  2. Sprawdzi, czy plik jest odpowiedniego typu.
  3. Wyświetli komunikat o sukcesie lub błędzie.

Kod HTML formularza

Na początek stwórzmy formularz HTML, który pozwoli użytkownikowi wybrać zdjęcie i je przesłać:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload zdjęcia</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><br>
        <input type="file" name="file" id="file" accept="image/*"><br><br>
        <button type="submit">Prześlij</button>
    </form>
</body>
</html>

Co się tutaj dzieje?

  • action="upload.php" – wskazuje na plik PHP, który obsłuży przesyłanie pliku.
  • method="post" – wymagane, aby przesyłać pliki.
  • enctype="multipart/form-data" – niezbędne do wysyłania plików.
  • accept="image/*" – pozwala użytkownikowi wybrać tylko pliki graficzne.

Skrypt PHP – Upload zdjęcia

Teraz zajmiemy się magią w pliku upload.php. Oto prosty skrypt, który poradzi sobie z przesłaniem zdjęcia:

<?php
// Sprawdzamy, czy plik został przesłany
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
    $file = $_FILES['file'];
    $uploadDir = 'uploads/'; // Folder, do którego zapisujemy pliki
    $uploadFile = $uploadDir . basename($file['name']);
    $allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];

    // Sprawdzamy, czy folder uploads istnieje, jeśli nie – tworzymy go
    if (!is_dir($uploadDir)) {
        mkdir($uploadDir, 0777, true);
    }

    // Walidacja pliku
    if (in_array($file['type'], $allowedTypes)) {
        if ($file['size'] <= 2 * 1024 * 1024) { // Maks. 2MB
            if (move_uploaded_file($file['tmp_name'], $uploadFile)) {
                echo "Plik został przesłany: <a href='$uploadFile'>" . htmlspecialchars($file['name']) . "</a>";
            } else {
                echo "Wystąpił problem z przesyłaniem pliku.";
            }
        } else {
            echo "Plik jest za duży. Maksymalny rozmiar to 2MB.";
        }
    } else {
        echo "Nieobsługiwany format pliku. Dozwolone: JPEG, PNG, GIF.";
    }
} else {
    echo "Nie przesłano żadnego pliku.";
}
?>

Omówienie kodu

  1. $_FILES['file']
    Ten superglobalny zmienna przechowuje informacje o przesłanym pliku, takie jak:
    • name – nazwa pliku.
    • type – typ MIME.
    • tmp_name – tymczasowa lokalizacja na serwerze.
    • size – rozmiar pliku w bajtach.
  2. Tworzenie folderu
    Jeśli folder uploads nie istnieje, tworzymy go za pomocą mkdir.
  3. Walidacja pliku
    • Sprawdzamy typ pliku ($allowedTypes).
    • Limitujemy rozmiar do 2 MB ($file['size']).
  4. Przesyłanie pliku
    Funkcja move_uploaded_file przenosi plik z tymczasowej lokalizacji do naszego folderu uploads.
  5. Bezpieczeństwo
    • Używamy htmlspecialchars w nazwie pliku, aby uniknąć potencjalnych ataków XSS.
    • Nazwa pliku jest zapisana w folderze dokładnie tak, jak przesłał ją użytkownik.

Drobne usprawnienia

Żeby kod był bardziej uniwersalny, możesz dodać:

  1. Generowanie unikalnych nazw plików:phpSkopiuj kod$uniqueName = uniqid() . '_' . basename($file['name']); $uploadFile = $uploadDir . $uniqueName; Dzięki temu unikniemy nadpisywania plików.
  2. Obsługę błędów PHP:
    Warto sprawdzić wartość $_FILES['file']['error'] i wyświetlić odpowiedni komunikat:phpSkopiuj kodif ($file['error'] !== UPLOAD_ERR_OK) { echo "Wystąpił błąd podczas przesyłania pliku."; exit; }

Jak przetestować?

  1. Skopiuj kod HTML i PHP do odpowiednich plików (index.html i upload.php).
  2. Utwórz folder uploads w tym samym katalogu co pliki PHP.
  3. Włącz lokalny serwer (np. za pomocą XAMPP lub WAMP).
  4. Prześlij plik przez formularz i sprawdź, czy został zapisany.

I to tyle! Właśnie nauczyłeś się tworzyć prosty formularz z uploadem zdjęć w PHP. Jak widzisz, cały proces jest dość prosty, a możliwości są ogromne. Możesz teraz dostosować ten kod do swoich potrzeb – może dodasz podgląd zdjęcia przed przesłaniem? Może zaczniesz przechowywać pliki w bazie danych? Opcji jest mnóstwo.

Szukasz taniego i dobrego hostingu dla swojej strony www? - Sprawdź Seohost.pl