ساخت اسلایدر تصاویر با jQuery به همراه آپلود فایل چندگانه با PHP

ساخت اسلایدر تصاویر با jQuery به همراه آپلود فایل چندگانه با PHP

ساخت اسلایدر تصاویر با jQuery و PHP می تواند به روش های مختلفی انجام شود. برای اینکار نیاز به مجموعه ای از تصاویر قابل استفاده در اسلایدر داریم.

سورس این تصاویر (data-source) می تواند یک فایل یا دیتابیس باشد که قبل از اجرا شدن واکشی شوند.

در این مثال PHP، ما اجازه آپلود چندین تصویر توسط فرم HTML را می دهیم.

سپس مسیر تصاویر آپلود شده در اسکریپت اسلایدر برای نمایش اسلاید به کار می رود.

کتابخانه های محبوب بی شماری برای ساخت اسلایدر تصاویر با jQuery و جاواسکریپت وجود دارند.

قابلیت این اسلایدرها از پلاگین به پلاگین فرق می کند. در آموزش قبلی, نحوه ساخت اسلایدشو ریسپانسیو با کتابخانه ResponsiveSlides.js را دیدیم.

در این مثال، از کتابخانه jQuery Slider برای ساخت اسلایدر استفاده می کنیم.

همچنین این امکان را خواهیم داشت که با کلیک/لمس روی تصویر آن را بصوت بزرگ و اسلایدی در همان صفحه نمایش بدیم.

 

فرم HTML آپلود چندین تصویر

این فرم شامل ورودی فایل (input="file") است که به کاربر اجازه آپلود چندین فایل همزمان را می دهد.

خصوصیت “multiple” به کاربر امکان انتخاب همزمان بیشتر از یک فایل را برای آپلود چندگانه فایل را می دهد.

این فایل ها در قالب آرایه قابل دسترس خواهند بود و می توانیم با یک حلقه foreach به هر فایل و تصویر دسترسی پیدا کنیم.

با سابمیت این فرم، فایل عکس برای آپلود در مسیر مشخص به سمت PHP ارسال می شود.

مشخص کردن مقدار “multipart/form-data” در خصوصیت enctype برای آپلود فایل ها در یک فرم ضروری است.

 

اعتبارسنجی جاواسکریپت برای ورودی فایل

اسکریپت زیر یک اعتبارسنجی جاواسکریپت ساده برای بررسی اینکه تعداد فایل ها بیشتر از ۰ است را نشان می دهد.

این کد با ایجاد رویداد سابمیت (ثبت فرم) اجرا خواهد شد.

اسکریپت اعتبارسنجی ما بررسی می کند که کاربر قبل از ارسال داده های فرم به PHP، حداقل یک تصویر انتخاب شده داشته باشد.

اگر فایلی انتخاب نشود، این کد اعتبارسنجی خروجی FALSE را برگشت می دهد و در صفحه مرورگر پیام خطا دیده خواهد شد.

 

کد PHP آپلود فایل تصاویر

قبلا مثال های زیادی از آپلود فایل در PHP را دیدیم. برای مثال آپلود چندگانه تصاویر، آپلود فایل با AJAX، هندل آپلودها با کتابخانه FineUploader و غیره.

در این مثال, فایل های آپلود شده به مسیر خاصی که مشخص کردیم ارسال می شود.

آرایه $_FILES به ترتیب با ایندکس های تعریف شده تکرار می شود.

همانطور که چندین تصاویر را از طریق فرم انتخاب کردیم، آرایه $_FILES بصورت چندبعدی همانند زیر نمایش می دهد.

ساخت اسلایدر تصاویر با jQuery به همراه آپلود فایل چندگانه با PHP

فایل ها در فولدر /images/ که به عنوان مسیر آپلود در move_upload_files() مشخص کردیم، ذخیره می شوند.

 

توابع آپلود فایل با PHP

هنگام آپلود فایل با PHP، توابع is_uploaded_file() و move_upload_file() استفاده می شوند.

تابع is_upload_file() برای بررسی اینکه فایل ها از طریق متد HTTP POST آپلود شده اند، استفاده می شود.

بعد تکمیل اعتبارسنجی، از تابع move_uploaded_file() برای انتقال فایل ها از $_FILES[‘file-input’][‘tmp_name’] به /images/ استفاده می کنیم.

 

تابع glob() در PHP

تابع glob برای دریافت مسیر تصاویر منطبق بر الگوی مشخص شده استفاده می شود.

در این مثال, من الگوی “images/*.jpeg” را برای دریافت تصاویر آپلود شده از فولدر موردنظر مشخص کردم.

این تابع خروجی مسیر فایل ها را بصورت آرایه برگشت می دهد. این خروجی آرایه را می توانیم با حلقه زدن به هر یک از مسیر فایل ها دسترسی پیدا کنیم.

در مثال ساخت اسلایدر تصاویر با jQuery به همراه آپلود فایل چندگانه با PHP، خروجی تابع glob() در دستور foreach() پردازش می شود.

با هر تکرار، تصویر ما از مسیر داینامیک خوانده و نمایش داده می شود.

 

اعتبارسنجی سمت سرور تصاویر

اسکریپت PHP در سمت سرور، طول آرایه $_FILES را بررسی می کند که بیشتر از ۰ باشد. اگر اینطور بود، پس فرایند آپلود فایل ادامه می یابد.

از آنجا که آپلود چندگانه فایل انجام می گیرد، تابع آپلود فایل در PHP ما داخل حلقه تکرار آرایه سراسری $_FILES اجرا می شود.

اگر آرایه $_FILES خالی بود و مقدار ۰ را هنگام محاسبه عناصر آن برگشت داد، پس عملیات آپلود انجام نخواهد شد.

 

اسکریپت jQuery اسلایدر عکس

در فایل main.js رویداد کلیک روی دکمه Start Slideshow اسلایدر را اجرا می کند.

این اسلایدر در صفحه فعلی بر روی body اجرا می شود و شامل دکمه های ناوبری و بستن است.

با کلیک روی هر یک از دکمه ها، وضعیت اسلایدر تغییر می کند. با بازشدن و بستن اسلایدر تصاویر، افکت های fade-in & fade-out اجرا می شود.

تابع galleryNavigation() با ایجاد رویداد کلیک روی دکمه های ناوبری اجرا شده و تصاویر اسلایدر را تغییر می دهد.

 

کد سفارشی jQuery برای نمایش گالری تصاویر

در آموزش های قبلی، ما کد سفارشی برای ساخت اسلایدر بدون استفاده از کتابخانه جانبی را دیدم.

ساخت کد سفارشی مزایای خود را دارد و همیشه خوب است. برای افزودن قابلیت های جدید یا انجام تغییرات انعطاف پذیر است. همچنین براحتی قابل توسعه و دیباگ است.

کد jQuery زیر برای ساخت تصاویر اسلایدشو را نشان می دهد. این اسلایدشو بصورت خودکار و بدون لینک های ناوبری اجرا می شود.

اگر نمی خواهید از پلاگین های اسلایدر استفاده کنید، پس این اسکریپت به شما در ساخت اسلایدر بسیار کمک می کند.

در کد بالا، من از تصاویر استاتیک برای اسلایدر استفاده کردم. شما می توانید تصاویر را از منابع ذخیره سازی مثل فایل یا دیتابیس mysql فراخوانی کنید.

 

خروجی ساخت اسلایدر تصاویر با jQuery به همراه آپلود فایل چندگانه با PHP

اسکرین شات زیر خروجی آپشن آپلود چندگانه فایل و نمایش گالری مانند تصاویر آپلود شده را نشان می دهد.

همچنین، اسکرین شات دوم اسلایدر تصاویر با افکت lightbox را نمایش می دهد.

 

آپلود تصاویر به همراه گالری

ساخت اسلایدر تصاویر با jQuery به همراه آپلود فایل چندگانه با PHP

اسلایدر با آپشن ناوبری و بستن

ساخت اسلایدر تصاویر با jQuery به همراه آپلود فایل چندگانه با PHP

امیدوارم از آموزش ساخت اسلایدر تصاویر با jQuery به همراه آپلود فایل چندگانه با PHP نهایت استفاده را برده باشید.

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید، از قسمت نظرات ارسال کنید. سریعا، پاسخگوی سوالات شما هستیم.

حسن شفیعی توسعه دهنده وب و موبایل مدیر سایت علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. اگر نیاز به برنامه نویس برای انجام پروژه و نوشتن اسکریپت های سمت وب, اپلیکیشن های اندروید و ios, پیدا کردن راه حل توسعه و غیره داشتید حتما از طریق تماس با ما/ واتساپ/ تلگرام بهم پیام بدید. برایتهیه هاست مطمین و پرسرعت کلیک کنید
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۲)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. سید محسن فارسیان ۱۱ بهمن ۱۳۹۹

    سلام اقای شفیعی،خسته نباشید.
    من یک فرمی درست کردم که داخلش از اینپوتی با تایپ فایل استفاده شده و اتریبیوت مولتی پل رو هم نوشتم تا چند تا فایل رو بشه همزمان فرستاد،این کدی که زدم به درستی کار میکنه.
    حالا میخوام نام هر فایل رو در دیتابیس ذخیره کنم .جدول دیتابیسم باید چه جوری باشه

    پاسخ
    1. حسن شفیعی ۱۱ بهمن ۱۳۹۹

      سلام ممنون.
      جدول files با فیلدهای id, filename که id باید auto_increament و filename هم varchar که به ازای هر فایل باید یک کویری sql از نوع insert بزنید و تک به تک داخل یک حلقه اجرا کنید تا هر کدام از فایل ها جداگانه در یک سطر جدول دیتابیس ذخیره شوند

      پاسخ
دوره های آموزشی