آپلود فایل با drag & drop در PHP

  • آپدیت شده در تاریخ

آپلود فایل با drag & drop در PHP

اگر قصد دارید آپلود فایل با drag & drop را در پروژه های php خود پیاده سازی کنید ، پس این مقاله بسیار به شما کمک خواهد کرد . با این آموزش به راحتی می توانید آپلود فایل با drag & drop یا آپلود عکس را در کمتر از ۵ دقیقه پیاده سازی کنید.

با استفاده از DropzoneJS و PHP به راحتی می توانید آپلود فایل با drag & drop را در اپلیکیشن های تحت وب خود قرار بدید . DropzoneJS یک کتابخانه متن باز و رایگان (open source) است که به شما امکان آپلود فایل با drag & drop همراه با پیشنمایش برای عکس ها را فراهم می کند. این کتابخانه بسیار سبک است ، نیازی به هیچ کتابخانه جانبی دیگری (مثل jQuery) ندارد .

DropzoneJS هیچ گونه مدیریتی برای انتقال فایل ها بر روی سرور انجام نمی دهد . پس ، ما از php برای آپلود فایل در سرور و MySQL برای قرار دادن اطلاعات فایل در دیتابیس استفاده می کنیم.

شما نیاز به دو فایل کتابخانه Dropzone دارید . dropzone.js و dropzone.css . این فایل ها را می توانید از سایت DropzoneJS دانلود کنید . همچنین سورس کد این فایل ها را در آخر این مقاله برای دانلود قرار دادیم .

برای نظم بخشیدن به ساختار فایل و فولدرها به صورت زیر عمل می کنیم :

  • فولدر js/ را ساخته و فایل dropzone.js را داخل آن قرار بدید
  • فولدر css/ را ساخته و فایل dropzone.css را داخل آن قرار بدید
  • فولدر uploads/ را برای ذخیره فایل های آپلود شده بسازید
  • فایل upload.php را برای مدیریت سرور-ساید آپلود فایل و ذخیره اطلاعات فایل در دیتابیس ایجاد کنید

حالا ساختار فایل و فولدرهای ما به صورت زیر خواهد بود .

  • js/
    • dropzone.js
  • css/
    • dropzone.css
  • uploads/
  • index.html
  • upload.php

ساخت جداول دیتابیس

اگر قصد ذخیره اطلاعات فایل را داشتید ، یک جدول در دیتابیس ایجاد کنید . برای تست ما یک جدول files برای ذخیره اسم فایل در دیتابیس ساختیم

فایل index.html

کتابخانه های Dropzone را فراخوانی کنید

شما فقط به یک تگ form باز و بسته بدون قرار دادن هیچ المنت دیگری داخل آن  نیاز دارید . در تگ form باید مشخصه های action و class را تعیین کنید . مشخصه action برای تعریف کردن فایلی که قصد انجام عملیات سمت سرور آپلود فایل را دارد و کلاس dropzone برای تعیین هویت کتابخانه Dropzone استفاده می شود. که ما برای آپلود فایل با drag & drop از این تگ بهره می بریم.

فایل upload.php

این فایل برای انجام عملیات آپلود فایل و قرار دادن اطلاعات فایل در دیتابیس استفاده می شود

برای کپی صحیح و کامل کدها ، دابل کلیک کرده تا وارد محیط سفید و کپی شوید در غیر اینصورت امکان دارد اجرای کدها با مشکل روبرو شود

برای آشنایی با نحوه آپلود فایل توسط php و اتصال به دیتابیس با mysqli کلیک کنید

خب تمام شد ، همین بود . دید به چه سادگی آپلود فایل با drag & drop در PHP با یک کتابخانه سبک و جالب DropzoneJS را پیاده سازی کردیم . کاری که شاید قبلا در سایت های مختلف دید و احساس می کردید بسیار پیچیده و سخت است .

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

برای دانلود سورس کد آپلود فایل با drag & drop در PHP از باکس دانلود استفاده کنید.

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

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. توصیه من: هاست میهن وب‎هاست
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۱۶)

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

  1. رستمی ۶ بهمن ۱۳۹۸

    سلام وقت بخیر یه سوال داشتم چطوری به مقدار رو به همراه عکس ها بفرستیم ??

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

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

      پاسخ
    2. SHL ARIO ۱۵ بهمن ۱۳۹۸

      برای فرمت ID=”dropzone” بذار بعد اینو در اخر کدهات اضافه کن تو فایل فایل index.html هر داده ای رو میتونی append کنید

      Dropzone.options.dropzone = {
      init: function (e) {
      var myDropzone = this;
      myDropzone.on(‘sending’, function(data, xhr, formData) {
      var data2 = $(‘#mode’).val();
      formData.append(“other”, JSON.stringify(data2));

      });
      }

      پاسخ
  2. میلاد ۵ آبان ۱۳۹۸

    باسلام
    تشکر از مطلب کاربردی فوق.
    لطفا راهنمایی کنید که برای افزایش حجم فایل آپلود شده کدام خط از dropzone.js را باید تغییر داد و به چه نحوی؟

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

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

      به هر حال داخل این فایل js در خط ۱۲۲ و بخش maxFilesize: 256 میتوانید حجم فایل آپلودی را تغییر بدید
      موفق باشید.

      پاسخ
      1. میلاد ۱۰ آبان ۱۳۹۸

        باتشکر از پاسخگویی بموقع.
        حتی با تغییر مقدار maxfilesize در کد اصلی کتابخانه js همچنان فایل بالای ۲ مگ قابلیت آپلود ندارد.مثل قبل فقط progress انجام میشه تیک هم میخوره ولی درون فولدر فایلی ایجاد نمیشه.ممنون میشم راهنمایی بفرمایید.
        ((ضمنا با همان مقدار ۲۵۶ فایل زیر ۲ مگ آپلود میشود و در فولدر قرار میگیرد.منظور از ۲۵۶ چیست که حتی فایل بالاتر از آن تا حجم ۲ مگ آپلود میشود؟ این رو هم توضیح بفرمایید.))
        پیشاپیش از پیگیریتان سپاسگزارم

        پاسخ
      2. حسن شفیعی ۱۰ آبان ۱۳۹۸

        مقداری که تعیین می کنید مگابایت است پس ۲۵۶ مگابایت مقدار پیش فرض کتابخانه است و فایل شما خیلی کمتر از این مقدار است
        پس این مورد میتونه مرتبط با خود وب سرور شما باشه که محدودیت حجم داده post شده داره که باید در کانفیگ آن تغییر لحاظ کنید که در لوکال هاست این مورد هست و باید در httpd.conf تغییر بدید
        https://www.cyberciti.biz/faq/apache-limiting-upload-size/
        چرا که در صورت قبول نکردن حجم از سمت کتابخانه خطای محدودیت حجم نمایش داده میشود پس مشکل از محیط اجرای شما است.
        همچنین برای احتیاط مقدار upload_max_filesize در فایل php.ini رو هم بررسی کنید.
        هر گونه تغییر باید با ریستارت کردن وب سرور (apache) و پاک کردن کش مرورگر همراه باشد.
        موفق باشید.

        پاسخ
      3. میلاد ۱۰ آبان ۱۳۹۸

        ممنون با تغییر در php.ini که شما گفتید و همچنین تغییر max-post data مشکل رفع شد

        پاسخ
  3. مهدی ۴ مهر ۱۳۹۷

    سلام این اموزش عالی بود من یه سوال داشتم اگر میشه یه اموزش درست کنید که در اون اپلود فایل رو با تمام ارور ها و فرستادن به دیتابیس و اپلود به پوشه دلخواه انجام بده 🙂
    فقط لطفا توجه کنید بخش اصلی خواسته من بخش ارور هاست که واقعا اذیت کننده ان 🙁
    اگر میشه این آموزش رو در حالت oop یا شی گرایی بدید چون بیشتریا از این حالت استفاده می کنن فک کنم ! من یه سری آموزش دیدم که توی oop کار رو انجام میداد اما بخش ارور هاش خیلی ضعیف بود بازم خیلی ممنون میشم اگر این کار رو انجام بدید ! 🙂

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

      سلام. خوشحالم که مفید واقع شده.
      معمولا برا اینکار از پکیج های آماده و معروف استفاده میشه که به رایگان از اینجا قابل دسترس و اضافه کردن به پروژه هست
      https://packagist.org/

      موفق باشید.

      پاسخ
  4. غزاله نورایی ۲۹ تیر ۱۳۹۷

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

    پاسخ
    1. حسن شفیعی ۲۹ تیر ۱۳۹۷

      سلام . ممنون. کافیه که بعد از آپلود, در فایل upload.php این عملیات رو پیاده سازی کنید .
      برای آپلود بصورت ajax نیز آموزش https://netparadis.com/php-ajax-image-upload را مطالعه بفرمایید
      موفق باشید.

      پاسخ
  5. بهنام ۱۶ بهمن ۱۳۹۶

    جناب شفیعی عزیز
    بنده منظور اینه از این addRemoveLinks: true در dropzone چطور میتونم استفاده کنم .

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

      برای اینکار بهتره تابع مربوطه رو فراخوانی کنید و آپشن مورد نظر رو ست کتید به این صورت

      $("div#myID").dropzone({
      addRemoveLinks: true
      });

      پاسخ
  6. بهنام ۱۶ بهمن ۱۳۹۶

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

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

      سلام . ممنونم .
      برای اینکار بهتره از دستور unlink در php و همچنین کویری delete در sql استفاده کنید که نحوه حذف فایل توسط php را می توانید مطالعه بفرمایید
      موفق و پیروز باشید.

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