باران فایل

دانلود اسکریپت آپلود چندین فایل با استفاده کشیدن و رها کردن در javascript - php

در این پست، نحوه ایجاد یا پیاده سازی یک بارگذاری فایل Drag and Dropبا استفاده از جاوا اسکریپت خالصرا دریافت خواهید کرد . این فایلعمدتاً با هدف ارائه مرجعی به دانشجویان IT/CS و برنامه نویسان جدید برای رسیدگی به آپلود فایل در سمت مشتری و سرور است.

بارگذاری فایل با کشیدن و رها کردن چیست؟

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

چگونه با استفاده از جاوا اسکریپت یک فایل Drag-and-Drop ایجاد کنیم؟

قابلیت کشیدن و رها کردن را می توان با استفاده از جاوا اسکریپت EventListeners به ​​دست آورد . در اینجا شنونده های رویداد زیر وجود دارد که می توان از آنها برای دستیابی به عملکرد مذکور استفاده کرد:

• ondragover
  • این شنونده رویداد شما را قادر می‌سازد تا یک فرآیند، توابع یا دستکاری‌هایی ایجاد کنید که وقتی فایل کشیده شده روی قسمت drop zone شناور می‌شود، فعال می‌شوند.
• ondragleave
  • این شنونده رویداد شما را قادر می سازد یک فرآیند، توابع یا دستکاری هایی ایجاد کنید که با خروج فایل کشیده شده از قسمت drop zone فعال می شوند.
• ondrop
  • این شنونده رویداد شما را قادر می‌سازد تا یک فرآیند، توابع یا دستکاری‌هایی ایجاد کنید که وقتی فایل کشیده شده در قسمت drop zone رها می‌شود، فعال می‌شوند.

مثال

در اینجا قطعه کد منبع برنامه های کاربردی وب ساده است که بارگذاری چند فایل را با کشیدن و رها کردن با یک نوار پیشرفت با استفاده از 3 شنونده رویداد ذکر شده در بالا نشان می دهد. این برنامه به کاربران نهایی اجازه می دهد تا چندین فایل را با کشیدن و رها کردن فایل ها در منطقه رها کردن برنامه آپلود کنند. فرآیند آپلود در سرور با استفاده از درخواست JS HTTP و اسکریپت PHP اجرا خواهد شد .

رابط

این فایل یک اسکریپت ترکیبی PHP و HTML برای نمایش ناحیه افت فایل و فایل های آپلود شده است. من از Bootstrap v5 و Fontawesome Icons برای طراحی رابط استفاده کردم.

برای شما کاربر عزیز پیشنهاد دانلود داده می شود