light mode
night mode
অ্যাজাক্স (Ajax)

উদাহরণ সহ Ajax এর মাধ্যমে ফাইল আপলোড করা

Web Development - অ্যাজাক্স (Ajax) - Ajax এর মাধ্যমে File Upload (Uploading Files with Ajax) | NCTB BOOK
OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

Ajax ব্যবহার করে একটি Job Application Form তৈরি করা যেখানে ব্যবহারকারী তার CV/Resume আপলোড করতে পারে, এটি একটি সাধারণ কিন্তু অত্যন্ত কার্যকর পদ্ধতি। এই উদাহরণে, HTML5 এর FormData এবং Ajax এর XMLHttpRequest ব্যবহার করে ব্যবহারকারীর CV আপলোড করা হয়েছে এবং প্রগ্রেস বার ব্যবহার করে আপলোডের প্রগ্রেস দেখানো হয়েছে।

উদাহরণ: Ajax এর মাধ্যমে Job Application এ ফাইল আপলোড করা

১. HTML এবং JavaScript (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Job Application Form</title>
</head>
<body>
    <h1>Job Application Form</h1>
    <form id="applicationForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br><br>
        <label for="cv">Upload CV:</label>
        <input type="file" id="cv" name="cv" accept=".pdf,.doc,.docx" required>
        <br><br>
        <button type="button" onclick="submitApplication()">Submit Application</button>
    </form>

    <div id="progress-container" style="display: none;">
        <p>Uploading...</p>
        <progress id="progressBar" value="0" max="100"></progress>
    </div>

    <div id="response-container">
        <!-- রেসপন্স বা ত্রুটি মেসেজ এখানে দেখানো হবে -->
    </div>

    <script>
        function submitApplication() {
            var form = document.getElementById('applicationForm');
            var formData = new FormData(form);

            // XMLHttpRequest অবজেক্ট তৈরি করা
            var xhr = new XMLHttpRequest();

            // POST রিকোয়েস্ট ওপেন করা
            xhr.open("POST", "upload_cv.php", true);

            // প্রগ্রেস ইভেন্ট হ্যান্ডল করা
            xhr.upload.onprogress = function(event) {
                if (event.lengthComputable) {
                    var percentComplete = (event.loaded / event.total) * 100;
                    document.getElementById("progressBar").value = percentComplete;
                    document.getElementById("progress-container").style.display = "block";
                }
            };

            // রেসপন্স হ্যান্ডলিং সেট করা
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("response-container").innerHTML = xhr.responseText;
                    } else {
                        document.getElementById("response-container").innerHTML = "Error submitting the application.";
                    }
                    document.getElementById("progress-container").style.display = "none";
                }
            };

            // ত্রুটি হ্যান্ডলিংয়ের জন্য onerror ইভেন্ট হ্যান্ডলার সেট করা
            xhr.onerror = function() {
                document.getElementById("response-container").innerHTML = "Network error occurred. Please try again.";
            };

            // রিকোয়েস্ট পাঠানো
            xhr.send(formData);
        }
    </script>
</body>
</html>

বিস্তারিত ব্যাখ্যা:

  • HTML ফাইলে একটি ফর্ম (<form>) তৈরি করা হয়েছে যেখানে নাম, ইমেইল, এবং CV (ফাইল) আপলোড করার জন্য ইনপুট ফিল্ড রয়েছে।
  • "Submit Application" বোতামে ক্লিক করলে submitApplication() ফাংশন কল হবে, যা FormData অবজেক্ট তৈরি করে এবং Ajax এর মাধ্যমে ফর্ম ডেটা সার্ভারে পাঠাবে।
  • Progress Bar: ফাইল আপলোডের প্রগ্রেস দেখানোর জন্য একটি প্রগ্রেস বার (<progress>) ব্যবহার করা হয়েছে।

২. PHP স্ক্রিপ্ট (upload_cv.php):

<?php
// ফর্ম থেকে ডেটা সংগ্রহ করা
$name = trim($_POST['name']);
$email = trim($_POST['email']);
$cv = $_FILES['cv'];

// ভ্যালিডেশন চেক করা
if (empty($name) || empty($email)) {
    http_response_code(400); // Bad Request
    echo "Name and email are required.";
    exit();
}

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    http_response_code(400); // Bad Request
    echo "Invalid email format.";
    exit();
}

// ফাইল চেক করা
if ($cv['error'] !== UPLOAD_ERR_OK) {
    http_response_code(400); // Bad Request
    echo "Error uploading the CV.";
    exit();
}

// অনুমোদিত ফাইল টাইপ চেক করা
$allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
if (!in_array($cv['type'], $allowedTypes)) {
    http_response_code(400); // Bad Request
    echo "Only PDF, DOC, and DOCX files are allowed.";
    exit();
}

// আপলোড ডিরেক্টরি তৈরি করা (যদি না থাকে)
$uploadDir = 'uploads/';
if (!is_dir($uploadDir)) {
    mkdir($uploadDir, 0777, true);
}

// ফাইলের নাম সেট করা
$uploadPath = $uploadDir . basename($cv['name']);

// ফাইল মুভ করার চেষ্টা করা
if (move_uploaded_file($cv['tmp_name'], $uploadPath)) {
    echo "Application submitted successfully! Your CV has been uploaded.";
} else {
    http_response_code(500); // Internal Server Error
    echo "Error saving the CV. Please try again later.";
}
?>

বিস্তারিত ব্যাখ্যা:

  1. ডেটা সংগ্রহ এবং ভ্যালিডেশন:
    • PHP স্ক্রিপ্ট ফর্ম ডেটা সংগ্রহ করে এবং নাম এবং ইমেইল যাচাই করে। যদি এগুলো ফাঁকা থাকে বা ইমেইল ফরম্যাট সঠিক না হয়, তাহলে একটি ত্রুটি মেসেজ এবং HTTP স্ট্যাটাস কোড রিটার্ন করা হয়।
  2. ফাইল চেক এবং ভ্যালিডেশন:
    • ফাইল আপলোডের ত্রুটি চেক করা হয়। অনুমোদিত ফাইল টাইপ চেক করা হয় (PDF, DOC, DOCX)।
  3. ফাইল আপলোড:
    • যদি ডিরেক্টরি না থাকে, তাহলে uploads/ ডিরেক্টরি তৈরি করা হয় এবং ফাইল আপলোড পাথ সেট করা হয়।
    • move_uploaded_file() ফাংশন দিয়ে ফাইল আপলোড ডিরেক্টরিতে সংরক্ষণ করা হয়। সফল হলে একটি সফল মেসেজ রিটার্ন করা হয়, অন্যথায় একটি ত্রুটি মেসেজ দেওয়া হয়।

ফাইল আপলোড প্রক্রিয়াটি কিভাবে কাজ করে:

JavaScript এবং HTML5:

  • ব্যবহারকারী ফাইল সিলেক্ট করে এবং "Submit Application" বোতামে ক্লিক করে। এরপর submitApplication() ফাংশন কল হয়।
  • FormData অবজেক্ট তৈরি করে ফাইল এবং ইনপুট ডেটা সংগ্রহ করা হয় এবং তা Ajax এর মাধ্যমে সার্ভারে পাঠানো হয়।

PHP স্ক্রিপ্ট:

  • PHP স্ক্রিপ্ট ফর্ম ডেটা এবং ফাইল প্রক্রিয়া করে এবং তা ডাটাবেসে সংরক্ষণ করে। সফল হলে একটি মেসেজ রিটার্ন করে।

Progress Bar:

  • JavaScript এ xhr.upload.onprogress ইভেন্ট হ্যান্ডলার ব্যবহার করে ফাইল আপলোডের প্রগ্রেস দেখানো হয়েছে।

Ajax এবং HTML5 এর মাধ্যমে Job Application এ File Upload এর সুবিধা:

  • পেজ রিফ্রেশ ছাড়াই ফাইল আপলোড: Ajax ব্যবহার করে পেজ রিফ্রেশ ছাড়াই ফাইল আপলোড করা যায়, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
  • Progress Bar: প্রগ্রেস বার ব্যবহার করে ফাইল আপলোডের সময় রিয়েল-টাইমে ব্যবহারকারীকে আপডেট দেওয়া যায়।
  • Error Handling: Ajax এবং PHP এর মাধ্যমে ত্রুটি হ্যান্ডলিং করা সহজ এবং সঠিক রেসপন্স প্রদান করা যায়।

সারসংক্ষেপ:

  • Ajax এবং HTML5 Integration: Ajax এবং HTML5 এর FormData এবং XMLHttpRequest ব্যবহার করে CV আপলোড করা হয়েছে।
  • PHP Server-Side Handling: PHP স্ক্রিপ্টে ফাইল আপলোড প্রক্রিয়া এবং ত্রুটি হ্যান্ডলিং করা হয়েছে।
  • Dynamic Feedback: প্রগ্রেস বার এবং ত্রুটি মেসেজের মাধ্যমে ব্যবহারকারীকে রিয়েল-টাইম ফিডব্যাক প্রদান করা হয়েছে।

এই উদাহরণটি অনুসরণ করে আপনি Ajax এবং HTML5 ব্যবহার করে Job Application Form এর মাধ্যমে ফাইল আপলোড করতে পারবেন, যা আপনার ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টে একটি কার্যকর উপায়।

আরও দেখুন...

উদাহরণ সহ Ajax এর মাধ্যমে ফাইল আপলোড করা

or

Don't have an account? Register

Promotion