uploadowanie zdjęcia

Jak napisać skrypt do uploadowania zdjęć

przez

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:

  1. Pozwoli użytkownikowi wybrać zdjęcie z komputera.
  2. Zabezpieczy upload przed nieautoryzowanymi plikami.
  3. Przechowa zdjęcia na serwerze w określonym folderze.
  4. 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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?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.";
}
?>
<?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."; } ?>
<?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?

  1. Weryfikacja folderu: Sprawdzamy, czy istnieje folder uploads. Jeśli nie, tworzymy go.
  2. Weryfikacja typu: Dozwalamy tylko na pliki JPEG, PNG i GIF.
  3. Weryfikacja rozmiaru: Akceptujemy pliki o wielkości do 2 MB.
  4. 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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$fileName = uniqid('', true) . "_" . $fileName;
$fileName = uniqid('', true) . "_" . $fileName;
$fileName = uniqid('', true) . "_" . $fileName;

Walidacja pliku po rozszerzeniu

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$fileExt = strtolower(pathinfo($fileName, PATHINFO_EXTENSION));
$allowedExts = ['jpg', 'jpeg', 'png', 'gif'];
if (!in_array($fileExt, $allowedExts)) {
die("Nieobsługiwane rozszerzenie pliku!");
}
$fileExt = strtolower(pathinfo($fileName, PATHINFO_EXTENSION)); $allowedExts = ['jpg', 'jpeg', 'png', 'gif']; if (!in_array($fileExt, $allowedExts)) { die("Nieobsługiwane 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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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.

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