50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

ساخت تصاویر بندانگشتی با PHP

ساخت تصاویر بندانگشتی با PHP حین آپلود

بطور معمول, تصاویر بندانگشتی (thumbnail) به منظور کاهش ابعاد و حجم عکس ها استفاده می شوند.بنابراین ایجاد تصاویر بندانگشتی برای عکس های در حال آپلود بهترین تمرین برای رسیدن به این مهم است.

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

اینکار باعث می شود بدون اینکه بخواهیم با css و ویژگی های width,height اندازه آن را کوچکتر جلوه بدیم, می توانیم از ساخت تصاویر بندانگشتی با PHP حین آپلود استفاده و یک تصویر کوچک را که خیلی بهینه تر است در layout یا همان چیدمان صفحه جا بدیم.

همچنین , استفاده از تصاویر بندانگشتی باعث می شود که زمان لود صفحه کاهش یابد.

 

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

آپلود و تغییر اندازه تصاویر با برنامه نویسی از کد های محبوبی است که بیشتر افراد جستجو می کنند. اگر به دنبال کد مشابهی هستید, این مثال به شما کمک می کند. همچنین قبلا آموزش تغییر اندازه تصاویر با PHP را منتشر کردیم.

 

در این مثال, ما از کتابخانه jQuery برای آپلود باینری تصویر توسط AJAX بهره بردیم.درخواست ajax کد PHP برای ساخت تصاویر بند انگشتی را به همراه ابعاد مشخص شده صدا می زند.

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

توابع کتابخانه GD در PHP برای ساخت تصاویر بندانگشتی با برنامه نویسی استفاده شده اند.

 

نمایش گزینه های آپلود عکس

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

در این صفحه, من یک تگ دربرگیرنده (container) برای نمایش تصاویر بند انگشتی در ابعاد مختلف ایجاد کردم.

Input فایل دارای خصوصیت accept برای ایجاد محدودیت انتخاب نوع فایل (تصویر) در سطح مرورگر است. همچنین, ما اعتبارسنجی تصویر در سمت سرور را با PHP مدیریت می کنیم.

کد jQuery برای ارسال درخواست AJAX

این اسکریپت از جی کویری برای پست کردن داده های تصویر به سمت PHP استفاده می کند.

در این کد jquery , نوار پیشرفت آپلود با تابع بازگشتی uploadProgress آپدیت و پیش می رود.

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

ساخت تصاویر بندانگشتی با PHP

بعد از پست کردن داده ها با ajax , این اسکریپت php برای انجام پروسه آپلود اجرا می شود.

اول از همه, حجم و ابعاد تصویر را اعتبارسنجی می کند. همینکه اعتبارسنجی تمام شد, تصاویر بندانگشتی(thumbnails) ساخته می شود.

در این مثال, من سه تصویر بندانگشتی با ابعاد ۱۵۰×۹۳ , ۳۰۰×۱۸۵ , ۵۵۰×۳۴۰ را ایجاد کردم.تصاویر ایجاد شده داخل فولدر مشخص شده بصورت داینامیک قرار می گیرند.

این توابع php برای ساخت تصاویر بند انگشتی در فایل functions.php قرار دارند.همچنین این فایل را باید در بالای فایل PHP که درخواست ajax را ارسال می کنید include کنید.این تصاویر بصورت داینامیک توسط توابع کتابخانه gd در php ایجاد شدند.

خروجی – ساخت تصاویر بندانگشتی با PHP حین آپلود

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

ساخت تصاویر بندانگشتی با PHP حین آپلود

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

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

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

موفق و پیروز باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

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

    دوره های آموزشی

    دانلود رایگان کتاب آموزش PHP

    صفر تا صد PHP و MySQL را یکجا یاد بگیرید
    همین الان دانلود کن
    نگران نباشید. ایمیل‌های مزاحم نمی‌فرستیم
    close-link