Post Image

طراحی فرم اپلود تصاویر با استفاده از اجاکس بوت استراپ و php

فرم آپلود تصویر را با استفاده از فریم‌ورک بوت‌استرپ (Bootstrap) طراحی می‌کنیم. بوت‌استرپ به ما این امکان را می‌دهد که به راحتی طراحی زیبایی ایجاد کنیم بدون نیاز به نوشتن CSS زیاد.

1. کد HTML با بوت‌استرپ:

ابتدا کد HTML فرم را با استفاده از بوت‌استرپ تنظیم می‌کنیم. برای اینکه از ویژگی‌های بوت‌استرپ استفاده کنیم، باید فایل‌های CSS و JS بوت‌استرپ را در صفحه وارد کنیم.

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>فرم آپلود تصویر</title>
    <!-- لینک به بوت‌استرپ 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* پروگرس بار */
        #progressWrapper {
            display: none;
            margin-top: 20px;
        }
        #progressBar {
            width: 100%;
            height: 20px;
            background-color: #f3f3f3;
            border-radius: 5px;
        }
        #progress {
            height: 100%;
            width: 0;
            background-color: #28a745;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h2 class="text-center mb-4">فرم آپلود تصویر</h2>
        <form id="uploadForm" enctype="multipart/form-data">
            <div class="mb-3">
                <label for="name" class="form-label">نام و نام خانوادگی:</label>
                <input type="text" class="form-control" id="name" name="name" required>
            </div>

            <div class="mb-3">
                <label for="image" class="form-label">انتخاب تصویر:</label>
                <input type="file" class="form-control" id="image" name="image" accept="image/*" required>
            </div>

            <button type="submit" class="btn btn-primary">ارسال</button>
        </form>

        <!-- نمایش پروگرس بار -->
        <div id="progressWrapper">
            <p>در حال آپلود: <span id="progressText">0%</span></p>
            <div id="progressBar">
                <div id="progress"></div>
            </div>
        </div>
    </div>

    <!-- اسکریپت‌های جاوااسکریپت -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/script.js"></script>
</body>
</html>

2. کد جاوااسکریپت (AJAX)

در این بخش همانطور که قبلاً ذکر شد، از FormData و XMLHttpRequest استفاده می‌کنیم تا فایل آپلود شده را به سرور ارسال کنیم و پروگرس بار را به نمایش درآوریم.

$(document).ready(function() {
    $("#uploadForm").submit(function(event) {
        event.preventDefault();

        // نمایش پروگرس بار
        $("#progressWrapper").show();

        var formData = new FormData(this);

        $.ajax({
            url: "upload.php",  // فایل PHP برای پردازش
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            xhr: function() {
                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener("progress", function(e) {
                    if (e.lengthComputable) {
                        var percent = (e.loaded / e.total) * 100;
                        $("#progress").width(percent + "%");
                        $("#progressText").text(Math.round(percent) + "%");
                    }
                });
                return xhr;
            },
            success: function(response) {
                alert("آپلود با موفقیت انجام شد!");
                console.log(response);
                $("#progressWrapper").hide();
            },
            error: function(xhr, status, error) {
                alert("خطا در آپلود فایل!");
                $("#progressWrapper").hide();
            }
        });
    });
});

3. کد PHP برای پردازش آپلود

کد PHP برای پردازش فایل آپلودی به شکل مشابهی خواهد بود که قبلاً ذکر شد:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $uploadDir = 'uploads/';  // مسیر پوشه آپلودها
    $maxFileSize = 5 * 1024 * 1024;  // حداکثر حجم فایل 5MB
    $allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];  // انواع فایل مجاز

    $name = $_POST['name'];  // گرفتن نام و نام خانوادگی
    $file = $_FILES['image'];

    // بررسی نوع فایل
    if (!in_array($file['type'], $allowedTypes)) {
        echo 'فرمت فایل مجاز نیست.';
        exit;
    }

    // بررسی اندازه فایل
    if ($file['size'] > $maxFileSize) {
        echo 'حجم فایل بیش از حد مجاز است.';
        exit;
    }

    // ساخت نام تصادفی برای فایل
    $fileName = uniqid('img_') . '.' . pathinfo($file['name'], PATHINFO_EXTENSION);

    // مسیر نهایی فایل
    $uploadPath = $uploadDir . $fileName;

    // انتقال فایل به پوشه مقصد
    if (move_uploaded_file($file['tmp_name'], $uploadPath)) {
        echo 'فایل با موفقیت آپلود شد!';
    } else {
        echo 'خطا در آپلود فایل!';
    }
} else {
    echo 'درخواست غیر معتبر';
}
?>

توضیحات:

  1. بوت‌استرپ: این فریم‌ورک به شما کمک می‌کند تا بدون نوشتن CSS زیاد، فرم خود را به شکلی زیبا طراحی کنید. در اینجا از کلاس‌های بوت‌استرپ برای استایل‌دهی به فرم و دکمه‌ها استفاده شده است.
  2. پروگرس بار: به محض اینکه آپلود شروع می‌شود، یک پروگرس بار به نمایش درمی‌آید که درصد آپلود فایل را نشان می‌دهد.
  3. AJAX: فرم به صورت AJAX ارسال می‌شود و صفحه رفرش نمی‌شود.
  4. PHP: فایل‌ها در سرور ذخیره می‌شوند و انواع فایل و حجم آن‌ها محدود به تنظیمات مشخص شده‌اند.

این روش ساده و امن برای ایجاد فرم آپلود تصویر با استفاده از بوت‌استرپ، AJAX و PHP است.

نظرات کاربران
ثبت نظرات
برای ثبت نظر باید عضو سایت باشید!

تازه های سایت

دسته بندی فروشگاه