آموزش طراحی وب

آپلود چندین تصویر بصورت همزمان با php

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

upload

سلام خدمت همراهان همیشگی مدرسه مجازی ایرانیان

آپلود چندین تصویر بصورت همزمان با php

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

یکی از دغدغه های برنامه نویس های تازه کار ، مبهم بودن آرایه ها در php هست که باعث میشه تا جایی که امکان داره از آرایه ها دوری کنند. اما برای پیاده کردن این قابلیت دیگه نمیتونن از آرایه ها فاصله بگیرن و باید با استفاده از آرایه ها این کار رو انجام بدن . نگران نباشید راهی بهتون پیشنهاد میکنم که بسیار سادست فقط کافیه یکم دقت کنید. در انتهای مقاله هم میتونید پروژه رو دانلود کنید.

پروژه ی ما به این صورت هست که یک دکمه browser میذاریم که توسط این browser میتونید چندین تصویر رو باهم select کنید و آپلود کنید. بصورت استاندارد حداکثر تعداد تصویری که میتونید انتخاب کنید ۲۰ عدد هست. تصویری از این فرم رو در زیر میتونید مشاهده کنید:

1

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

 

چند نکته رو در رابطه با این فرم خدمتتون عرض کنم:

  • برای آپلود فایل در فرم ها باید خصوصیت enctype رو حتما به فرم اختصاص بدید.
  • Action رو خالی میذاریم چون میخوایم تو همین صفحه عملیات php انجام بشه . به عبارتی html و php در یک صفحه قرار داره و ما این دو رو ادغام کردیم. نحوه ی ادغام html و php رو میتونید از طریق این مقاله یاد بگیرید.
  • برای فیلد browser نوع file رو در نظر میگیریم و چون میخوایم چندین تصویر رو انتخاب کنیم خصوصیت multiple رو بهش اختصاص میدیم.
  • خصوصیت name رو به شکلی که مشاهده میکنید نام گذاری میکنیم یعنی file[] . چراکه میخوایم به شکل آرایه مقادیر رو دریافت کنیم و در دیتابیس ذخیره کنیم.

حالا با زدن دکمه submit باید مقادیر رو دریافت کنیم و در پوشه ای بنام files ذخیره کنیم، همچنین مقادیر رو در دیتابیس نیز ذخیره کنیم. برای این منظور کدهای سمت سرور و php رو مینویسیم:

ابتدا باید بگیم اگر مقداری با نام submitPhotos به سمت سرور ارسال شده بود وارد عملیات بشه، در غیر این صورت هیچ عملیاتی انجام نده. این حالت زمانی رخ میده که شما دکمه submit رو با نام submitPhotos زده باشید. برای همین از isset استفاده میکنیم:

 

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

 

در این حلقه $key ایندکس محسوب میشه و با استفاده از این ایندکس تک به تک تصاویر رو آپلود میکنیم و یا حتی در دیتابیس ذخیره میکنیم. حالا نام فایل و عنوان فایل رو در متغییرهای زیر ذخیره میکنیم:

 

در ادامه و در همین حلقه فرمت تصویر رو بدست میاریم و در متغییر extension ذخیره میکنیم:

 

حالا اندازه ی تصویر رو بدست میاریم . در صورت نیاز میتونید اندازه ی تصویر رو تغییر بدید و تمامی تصاویر رو در یک اندازه ی مشخص آپلود کنید ، اما ما در این مثال اندازه ی تصویر رو تغییر ندادیم و با اندازه ی اصلی تصاویر رو آپلود میکنیم.

 

اگر خواستید اندازه ی مشخصی تعیین کنید متغییرهای $newwidth و $newheight رو مقداردهی کنید.

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

 

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

حالا نامی که تولید کردیم رو به فرمت فایل متصل میکنیم.

 

حالا مسیر آپلود تصویر رو مشخص میکنیم و بعد آپلود رو انجام میدیم:

 

تا اینجا شما میتونید چندین تصویر رو به صورت همزمان در پوشه ی files ذخیره کنید.

در نهایت میتونید در دیتابیس هم ذخیره کنید، برای این کار ابتدا به دیتابیس متصل میشیم:

 

حالا که به دیتابیس متصل شدیم ، در جدول مورد نظر نام تصاویر رو ذخیره میکنیم:

 

به همین راحتی 🙂 با این روش شما میتونید چندین تصویر رو همزمان آپلود کنید و در دیتابیس هم تک به تک ذخیره کنید.

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

میتونید این پروژه رو بطور کامل دانلود و بررسی کنید.

امیدوارم که براتون مفید بوده باشه.

موفق و پاینده باشید.

منتشر شده در پنجمین شماره ماهنامه طراحی وب

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۱۰

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

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

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

  • سلام من می خواهیم ۲۴ عگس به طور همزما اپلود کنم و بایک نام دیتابیس ذخیره کنم
    بعد ترتیب اسم انها نمایش بده چرا کار باید انجام بده

    • سلام دوست عزیز
      از توابع time یا uniqid میتونید استفاده کنید تا نام رو ایجاد کنید ، قبل از آپلود تصاویر این نام رو در یک متغییر ذخیره کنید و در هنگام آپلود این نام رو برای همه ی عکس ها در نظر بگیرید.
      برای ترتیب نمایش اونها میتونید در کوئری از order by name استفاده کنید .
      موفق و پاینده باشید

  • من میخوام با هر بار زدن دکمه brows بشه فقط یک عکس رو انتخاب کرد و نام عکس در لیست پایین فرم اضافه بشه و اینکار رو چند بار تکرار کرد و هر بار نام عکس اضافه بشه و کاربر بتونه قبل از ثبت فرم نام عکس هارو خذف کنه و بعد که دکمه ثبت رو زد همه عکس ها آپلود بشه .
    لطفا راهنمایی کنید.

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

  • سلام و خسته نباشید من از کدهای ارائه شده استفاده کردم . فقط مشکلم این هست که نتونستم در دیتابیس ذخیره کنم. فکر می کنم بخش انتهایی کد که مربوط به ذخیر در دیتابیس هست، مشکل داره

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

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

اموزش تصادفی