Ajax এবং HTML5 এর মাধ্যমে File Upload

Ajax এর মাধ্যমে File Upload (Uploading Files with Ajax) - অ্যাজাক্স (Ajax) - Web Development

815

Ajax এবং HTML5 ব্যবহার করে ফাইল আপলোড একটি আধুনিক পদ্ধতি, যা ব্যবহারকারীদের পেজ রিফ্রেশ ছাড়াই ফাইল আপলোড করতে এবং রিয়েল-টাইমে প্রগ্রেস বার বা মেসেজ দেখাতে সক্ষম করে। HTML5 এর FormData অবজেক্ট এবং Ajax এর XMLHttpRequest ব্যবহার করে সহজেই ফাইল আপলোড করা যায়। নিচে একটি উদাহরণসহ ফাইল আপলোডের প্রক্রিয়া ব্যাখ্যা করা হলো।

উদাহরণ: Ajax এবং HTML5 এর মাধ্যমে File Upload

১. 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>Ajax File Upload Example</title>
</head>
<body>
    <h1>Upload a File</h1>
    <form id="uploadForm">
        <label for="file">Choose file:</label>
        <input type="file" id="file" name="file" required>
        <br><br>
        <button type="button" onclick="uploadFile()">Upload</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 uploadFile() {
            var fileInput = document.getElementById('file');
            var file = fileInput.files[0];
            if (!file) {
                document.getElementById("response-container").innerHTML = "Please select a file to upload.";
                return;
            }

            // FormData অবজেক্ট তৈরি করা এবং ফাইল অ্যাড করা
            var formData = new FormData();
            formData.append("file", file);

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

            // POST রিকোয়েস্ট ওপেন করা
            xhr.open("POST", "upload_file.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 uploading file.";
                    }
                    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 ফাইলে একটি ফাইল ইনপুট ফিল্ড (<input type="file">) এবং একটি আপলোড বোতাম (<button>) রয়েছে। "Upload" বোতামে ক্লিক করলে uploadFile() ফাংশন কল হবে।
Progress Bar: ফাইল আপলোডের প্রগ্রেস দেখানোর জন্য একটি প্রগ্রেস বার (<progress>) ব্যবহার করা হয়েছে।
response-container নামে একটি <div> এলিমেন্ট রয়েছে, যেখানে আপলোড রেসপন্স বা ত্রুটি মেসেজ দেখানো হবে।

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

<?php
// চেক করা হচ্ছে যে ফাইল আপলোড করা হয়েছে কিনা
if (isset($_FILES['file'])) {
    $file = $_FILES['file'];

    // ফাইলের নাম এবং টেম্পোরারি লোকেশন পাওয়া
    $fileName = $file['name'];
    $fileTmpName = $file['tmp_name'];
    $uploadDir = 'uploads/';
    $uploadPath = $uploadDir . basename($fileName);

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

    // ফাইল মুভ করার চেষ্টা করা
    if (move_uploaded_file($fileTmpName, $uploadPath)) {
        echo "File uploaded successfully: " . $fileName;
    } else {
        http_response_code(500); // Internal Server Error
        echo "Error uploading the file.";
    }
} else {
    http_response_code(400); // Bad Request
    echo "No file was uploaded.";
}
?>

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

ফাইল চেক করা:
- PHP স্ক্রিপ্ট চেক করছে যে ফাইলটি $_FILES এর মাধ্যমে আপলোড করা হয়েছে কিনা।
ফাইল আপলোড পাথ সেট করা:
- uploads/ নামে একটি ডিরেক্টরি চেক করা হয়েছে এবং সেটি না থাকলে তৈরি করা হয়েছে।
ফাইল মুভ করা:
- move_uploaded_file() ফাংশন দিয়ে ফাইলটি টেম্পোরারি লোকেশন থেকে আপলোড ডিরেক্টরিতে মুভ করা হয়েছে।
- যদি আপলোড সফল হয়, তাহলে একটি সফল মেসেজ রিটার্ন করা হয়েছে, অন্যথায় একটি এরর মেসেজ এবং HTTP স্ট্যাটাস কোড 500 সেট করা হয়েছে।

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

JavaScript এবং HTML5:

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

PHP স্ক্রিপ্ট:

PHP স্ক্রিপ্ট ফাইলটি প্রক্রিয়া করে এবং ফাইলটি আপলোড ডিরেক্টরিতে সংরক্ষণ করে।
সফল হলে একটি মেসেজ রিটার্ন করে, অন্যথায় ত্রুটি মেসেজ রিটার্ন করে।

Progress Bar:

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