HTML, CSS, மற்றும் PHP பயன்படுத்தி கோப்பு பதிவேற்ற பொத்தானை உருவாக்குவது

வலைத்தளங்களில் கோப்புகளை பதிவேற்றுவது மிகவும் பொதுவான செயல்பாடாகும். பயனர் கோப்புகளை பதிவேற்றுவதற்கான ஒரு செயல்பாட்டை உருவாக்க HTML, CSS, மற்றும் PHP பயன்படுத்துவது எளிமையானது. இப்போது, நாம் அதைப் பார்க்கலாம்.

1. HTML: கோப்பு பதிவேற்ற பொத்தானை உருவாக்குதல்

HTMLல், input குறியீட்டை பயன்படுத்தி கோப்பு பதிவேற்ற பொத்தானை உருவாக்கலாம்.

<!DOCTYPE html>
<html lang="ta">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>கோப்பு பதிவேற்றம்</title>
</head>
<body>
    <h2>கோப்பு பதிவேற்றம்</h2>
    <form action="upload.php" method="post" enctype="multipart/form-data">
        <label for="fileUpload">கோப்பை தேர்வு செய்க:</label>
        <input type="file" name="fileUpload" id="fileUpload">
        <input type="submit" value="பதிவேற்றம்">
    </form>
</body>
</html>

இங்கு, input type="file" ஆனது ஒரு கோப்பை தேர்வு செய்யும் பொத்தானை வழங்குகிறது. மேலும், கோப்பை சர்வருக்கு அனுப்புவதற்கு form கோப்பு படிவம் பயன்படுத்தப்படுகிறது.

2. CSS: கோப்பு பதிவேற்ற பொத்தானை அலங்கரிப்பு

CSS பயன்படுத்தி, கோப்பு பதிவேற்ற பொத்தானை அழகாக அலங்கரிக்கலாம்.

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    text-align: center;
    padding: 50px;
}

form {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    display: inline-block;
}

label {
    font-size: 18px;
}

input[type="file"] {
    margin-top: 10px;
    font-size: 16px;
}

input[type="submit"] {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #28a745;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #218838;
}

இப்போதெல்லாம், HTML பகுதியில் உருவாக்கிய கோப்பு பதிவேற்ற பொத்தானுக்கு மேலே, CSS மூலம் சில அழகான அலங்காரங்களைச் செய்கிறோம்.

3. PHP: கோப்பை சர்வரில் பதிவேற்றுதல்

PHP பயன்படுத்தி, கோப்புகளை சர்வரில் எளிதாக பதிவேற்ற முடியும்.

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $target_dir = "uploads/";
    $target_file = $target_dir . basename($_FILES["fileUpload"]["name"]);
    $uploadOk = 1;
    $fileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));

    // கோப்பின் அளவை சரிபார்க்கவும்
    if ($_FILES["fileUpload"]["size"] > 500000) {
        echo "தோழர், உங்கள் கோப்பு மிக பெரியதாக உள்ளது.";
        $uploadOk = 0;
    }

    // கோப்பின் வகையை சரிபார்க்கவும்
    if ($fileType != "jpg" && $fileType != "png" && $fileType != "jpeg"
    && $fileType != "gif" ) {
        echo "மன்னிக்கவும், JPG, JPEG, PNG & GIF கோப்புகள் மட்டுமே அனுமதிக்கப்படுகின்றன.";
        $uploadOk = 0;
    }

    // கோப்பை சர்வரில் பதிவேற்றம் செய்யவும்
    if ($uploadOk == 1) {
        if (move_uploaded_file($_FILES["fileUpload"]["tmp_name"], $target_file)) {
            echo "கோப்பு ". htmlspecialchars(basename($_FILES["fileUpload"]["name"])) . " வெற்றிகரமாக பதிவேற்றப்பட்டது.";
        } else {
            echo "மன்னிக்கவும், கோப்பை பதிவேற்ற ஒரு பிழை ஏற்பட்டது.";
        }
    }
}
?>

இந்த PHP குறியீடு, கோப்பை சர்வரில் “uploads” என்ற அடைவிற்கு பதிவேற்றுகிறது. கோப்பின் அளவு மற்றும் வகையைச் சரிபார்க்கவும், பதிவேற்றத்தில் ஏதேனும் பிழைகள் உள்ளதா என்று பரிசோதிக்கவும் இந்தச் சுருக்கம் உதவுகிறது.

முடிவுரை:

HTML, CSS, மற்றும் PHP பயன்படுத்தி, கோப்பு பதிவேற்ற பொத்தானை எளிதாக உருவாக்கலாம். இது உங்கள் வலைத்தளத்திற்கு பயனரின் கோப்புகளைப் பதிவேற்றுவதற்கான ஒரு முதன்மையான செயல்பாடாக இருக்கும். இந்த வழிகாட்டியைப் பின்பற்றினால், நீங்கள் உங்கள் வலைத்தளத்தில் தரமான கோப்பு பதிவேற்ற செயல்பாட்டை உருவாக்க முடியும்.

இணைப்பு:
மேலதிக தகவல்களை PHP.net இல் பார்க்கவும். உங்கள் கருத்துக்களைப் பகிர்ந்து, உங்கள் அனுபவத்தைப் பகிரவும்!