نحوه فعال کردن آپلود فایل با کشیدن و رها کردن در وردپرس

کلیک کردن روی یک دکمه، پیمایش پوشه‌ها، انتخاب فایل‌ها—فرآیند آپلود سنتی کار می‌کند، اما دست و پا گیر است. کشیدن و رها کردن چیزی است که کاربران در سال ۲۰۲۴ انتظار دارند. آنها می‌خواهند فایل‌ها را از دسکتاپ خود بگیرند و مستقیماً روی فرم شما قرار دهند.

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

چرا کشیدن و رها کردن مهم است؟

آپلودهای سریع‌تر

• عدم پیمایش در پنجره‌های محاوره‌ای فایل
• انتخاب و رها کردن با یک حرکت
• آپلود همزمان چندین فایل

تجربه کاربر بهتر

• شهودی - کاربران کشیدن و رها کردن را درک می‌کنند
• مدرن و شیک به نظر می‌رسد
• کاهش اصطکاک در تکمیل فرم

نرخ تکمیل بالاتر

• آپلود آسان‌تر به معنی فرم‌های رها شده کمتر است
• کاربران وقتی فایل‌ها ساده باشند، احتمال بیشتری دارد که آنها را پیوست کنند.
• ظاهر حرفه‌ای باعث ایجاد اعتماد می‌شود

تلفن همراه دوستانه

• به زیبایی به انتخابگر فایل استاندارد در موبایل برمی‌گردد
• دستگاه‌های لمسی انتخاب فایل بومی را دریافت می‌کنند
• بدون خرابی در عملکرد

نحوه کار کشیدن و رها کردن

تجربه کاربر

1. کاربر یک منطقه رها کردن (drop zone) در فرم شما می‌بیند.
2. آنها فایل‌ها را از دسکتاپ/پوشه خود درگ می‌کنند
3. برجسته شدن ناحیه رها کردن وقتی فایل‌ها روی آن شناور می‌شوند
4. فایل‌ها رها می‌شوند و آپلود شروع می‌شود
5. پیش‌نمایش/تأیید، موفقیت آپلود را نشان می‌دهد

بازخورد بصری

کشیدن و رها کردن خوب، نشانه‌های بصری ارائه می‌دهد:

• حالت پیش‌فرض: منطقه سقوط را با دستورالعمل‌ها پاک کنید
• بکشید: هایلایت‌های منطقه، تغییر رنگ حاشیه
• رها کردن: فایل‌ها در قسمت پیش‌نمایش ظاهر می‌شوند
• در حال آپلود: شاخص پیشرفت
• تکمیل: تأیید موفقیت

طراحی منطقه سقوط

المان‌های معمول ناحیه سقوط:

┌─────────────────────────────────────┐ │ │ 📁 فایل‌ها را به اینجا بکشید یا │ │ برای مرور کلیک کنید │ │ │ │ پذیرفته شده: PDF، JPG، PNG │ │ حداکثر حجم: ۱۰ مگابایت │ │ │ └────────────────────────────────────────┘

تنظیم آپلود با کشیدن و رها کردن

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

مرحله ۱: نصب سازنده فرم خودکار

1. رفتن به پلاگین ها → افزودن موارد جدید
2. جستجو برای "A.F.B.«(نام اختصاری سازنده خودکار فرم)»
3. پیدا کردن "AFB – سازنده خودکار فرم – سازنده فرم با کشیدن و رها کردن"
4. کلیک کنید نصب در حال حاضر، و سپس فعال کردن

مرحله ۲: اضافه کردن فیلد آپلود فایل

1. فرم خود را ایجاد یا ویرایش کنید
2. کشیدن آپلود فایل رزومه فیلد را روی فرم خود قرار دهید
3. برای باز کردن تنظیمات فیلد کلیک کنید

مرحله ۳: کشیدن و رها کردن (drag and drop) از قبل تعبیه شده است

خبر خوب: فیلد آپلود فایل در Auto Form Builder به طور پیش‌فرض شامل قابلیت کشیدن و رها کردن است. نیازی به پیکربندی خاصی نیست.

منطقه آپلود به صورت خودکار:

• فایل‌های کشیده شده را می‌پذیرد
• نکات برجسته در مورد کشیدن بیش از حد
• پیش‌نمایش فایل‌ها را پس از رها کردن نشان می‌دهد
• به حالت مرور با کلیک در موبایل برمی‌گردد

مرحله ۴: سفارشی‌سازی فیلد آپلود

تنظیمات فیلد آپلود خود را پیکربندی کنید:

انواع فایل‌های مجاز

• انتخاب کنید کدام دسته فایل‌ها پذیرفته شوند
• تصاویر، اسناد، جداول و غیره

حداکثر اندازه فایل

• محدودیت اندازه هر فایل را تنظیم کنید
• از آپلودهای حجیم جلوگیری می‌کند

فایل های متعدد

• فعال کردن پذیرش چندین فایل حذف شده
• تنظیم حداقل/حداکثر محدودیت‌ها

برچسب های سفارشی

• برچسب فیلد: «آپلود اسناد»
• متن راهنما: «فایل‌ها را اینجا بکشید یا برای مرور کلیک کنید»

مرحله ۵: استایل دادن به ناحیه رها کردن (اختیاری)

برای سفارشی‌سازی ظاهر فرم از استایل‌دهی استفاده کنید:

• سبک و رنگ حاشیه
• رنگ پس زمینه
• آیکون یا تصویرسازی
• حالت‌های شناور/فعال

بهترین شیوه‌های رها کردن منطقه

۱. آن را قابل مشاهده کنید

منطقه سقوط باید واضح باشد:

• حاشیه واضح (حاشیه‌های نقطه‌چین مرسوم هستند)
• اندازه مناسب (کوچک نباشد)
• آیکونی که آپلود فایل را نشان می‌دهد (پوشه، فضای ابری، فلش)

۲. دستورالعمل‌های واضحی را درج کنید

به کاربران بگویید چه کاری انجام دهند:

• «فایل‌ها را اینجا بکشید»
• «یا برای مرور کلیک کنید»
• نمایش انواع فایل‌های پذیرفته‌شده

۳. بازخورد بصری ارائه دهید

کاربران باید بدانند که سیستم چگونه پاسخ می‌دهد:

• تغییر رنگ هنگام هاور
• برجسته کردن حاشیه هنگام کشیدن روی تصویر
• پیام «رها کردن برای آپلود»

۴. نمایش پیشرفت آپلود

برای فایل‌های بزرگتر:

• نوار پیشرفت در حین آپلود
• درصد تکمیل شده
• نام فایل در حال آپلود

۵. موفقیت را تأیید کنید

پس از اتمام آپلود:

• نمایش نام/تصویر بندانگشتی فایل
• علامت تیک یا نشانگر موفقیت
• گزینه حذف و امتحان مجدد

6. خطاها را به خوبی مدیریت کنید

وقتی مشکلی پیش می‌آید:

• پیام خطا را پاک کنید ("فایل خیلی بزرگ است")
• فایل مشکل را هایلایت کنید
• اجازه تلاش مجدد

کشیدن و رها کردن در مقابل کلیک برای مرور

بهترین رویکرد: از هر دو پشتیبانی کنید. برای کاربران حرفه‌ای کشیدن و رها کردن، برای بقیه کلیک کنید تا فهرست شوند.

الگوهای رایج منطقه افت

الگوی ۱: منطقه سقوط کامل

منطقه بزرگ و برجسته اختصاص داده شده به انداختن فایل:

┌──────────────────────────────────────┐ │ │ │ ☁️ آپلود فایل │ │ │ │ فایل‌ها را اینجا بکشید و رها کنید، یا │ │ برای مرور کلیک کنید │ │ │ PDF، DOC، JPG، PNG (حداکثر ۱۰ مگابایت) │ │ │ └────────────────────────────────────────────┘

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

الگوی ۲: منطقه سقوط فشرده

منطقه کوچکتر در کنار سایر مزارع:

پیوست‌ها ┌──────────────────────────┐ │ 📎 فایل‌ها را رها کنید یا مرور کنید │ └────────────────────────────────┘

بهترین برای: آپلود فایل به عنوان یکی از فیلدهای فرم.

الگوی ۳: درون‌خطی با دکمه

منطقه رها کردن همراه با دکمه سنتی:

┌───────────────────────────────────────┐ │ فایل‌ها را اینجا رها کنید [انتخاب فایل‌ها] │ └─────────────────────────────────────────┘

بهترین برای: رویکرد ترکیبی، گزینه جایگزین واضح.

الگوی ۴: ناحیه پیش‌نمایش تصویر

منطقه رها کردن با پیش نمایش تصاویر کوچک:

┌───────────────────────────────────────┐ │ [img1] [img2] [img3] [+] │ │ │ │ تصاویر بیشتر را اینجا رها کنید │ └─────────────────────────────────────────┘

بهترین برای: گالری تصاویر، آپلود عکس.

ملاحظات موبایل

دستگاه‌های لمسی، قابلیت کشیدن و رها کردن ندارند

کاربران موبایل نمی‌توانند فایل‌ها را بکشند و رها کنند. فرم شما باید به راحتی به عقب برگردد:

• روی انتخابگر فایل باز شده در ناحیه رها کردن ضربه بزنید
• انتخاب عکس/فایل بومی
• گزینه دوربین برای گرفتن عکس‌های جدید

برچسب‌های سازگار با موبایل

تنظیم پیام‌رسانی برای موبایل:

• دسکتاپ: «فایل‌ها را اینجا بکشید یا برای مرور کلیک کنید»
• موبایل: «برای انتخاب فایل‌ها ضربه بزنید» (یا فقط هر دو را نشان دهید)

تست روی دستگاه های واقعی

قبل از پرتاب:

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

تقویت منطقه رهاسازی

انیمیشن هنگام کشیدن روی صفحه

انیمیشن‌های ظریف، تجربه کاربری (UX) را بهبود می‌بخشند:

• نبض یا درخشش مرزی
• محو شدن رنگ پس زمینه
• پرش یا مقیاس آیکون

آن را ظریف نگه دارید - حواس مخاطب را از عمل پرت نکنید.

آیکون‌های نوع فایل

نمایش آیکون‌های مرتبط:

• 📄 برای اسناد
• 🖼️ برای تصاویر
• 📊 برای صفحات گسترده
• 🎥 برای ویدیوها

پیشرفت آپلود

برای بازخورد بهتر هنگام آپلود:

• نوار پیشرفت برای هر فایل
• پیشرفت کلی برای چندین فایل
• گزینه لغو برای آپلودهای طولانی

پیش‌نمایش‌های تصویر بندانگشتی

برای آپلود تصاویر:

• نمایش تصویر بندانگشتی پس از رها کردن
• برای مشاهده در اندازه اصلی کلیک کنید
• دکمه X برای حذف

عیب‌یابی کشیدن و رها کردن

فایل‌ها پاک نمی‌شوند

بررسی:

• جاوا اسکریپت در مرورگر فعال است
• بدون خطای جاوا اسکریپت که مانع از عملکرد می‌شود
• نوع فایل مجاز است
• مرورگر از کشیدن و رها کردن پشتیبانی می‌کند (مرورگرهای مدرن این کار را انجام می‌دهند)

منطقه رها کردن برجسته نمی‌شود

علل احتمالی:

• CSS به درستی بارگذاری نمی‌شود
• خطای جاوا اسکریپت
• تداخل افزونه‌ها

فایل‌ها آپلود می‌شوند اما نمایش داده نمی‌شوند

بررسی:

• قابلیت پیش‌نمایش فعال شد
• نوع فایل پشتیبانی شده برای پیش نمایش
• آپلود در واقع تکمیل شد

عدم کارکرد نسخه پشتیبان موبایل

تأیید کنید:

• کنترل‌کننده‌ی کلیک/تپ فعال است
• ورودی فایل مخفی وجود دارد
• مجوزهای مرورگر موبایل برای دسترسی به فایل

آپلودهای کند

باعث:

• حجم فایل های بزرگ
• اتصال به اینترنت کند
• محدودیت های سرور

راه حل ها:

• اضافه کردن شاخص‌های پیشرفت
• محدودیت‌های معقول برای اندازه فایل تعیین کنید
• برای فایل‌های بسیار بزرگ، آپلودهای تکه‌تکه را در نظر بگیرید

پشتیبانی مرورگر

آپلود فایل با کشیدن و رها کردن در همه مرورگرهای مدرن پشتیبانی می‌شود:

اگر نیاز به پشتیبانی از مرورگرهای بسیار قدیمی دارید، مطمئن شوید که قابلیت کلیک برای مرور مجدد (click-to-browse fallback) کار می‌کند.

ملاحظات دسترسی

پشتیبانی از صفحه کلید

همه از ماوس استفاده نمی‌کنند:

• منطقه رها کردن باید قابل فوکوس باشد (tabindex)
• Enter/Space باید پنجره‌ی فایل را باز کند.
• حالت‌های فوکوس باید قابل مشاهده باشند

صفحه خوان ها

• برچسب‌های ناحیه آپلود را پاک کنید
• اعلام پیشرفت آپلود
• تأیید آپلودهای موفق

فقط به کشیدن تکیه نکنید

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

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

ارسال سند

کاربران می‌توانند قراردادها، گزارش‌ها یا برنامه‌ها را مستقیماً از پوشه‌های خود درگ کنند.

گالری های تصویر

برای شرکت در مسابقه یا ارسال نمونه کارها، چندین عکس را همزمان رها کنید.

درخواستهای پشتیبانی

اسکرین‌شات‌ها یا گزارش‌های خطا را مستقیماً به فرم تیکت بکشید.

تقاضا نامه های شغلی

نمونه رزومه، انگیزه‌نامه و نمونه کارها را در یک اقدام ارائه دهید.

پورتال های مشتری

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

پرسش و پاسخهای متداول

آیا کشیدن و رها کردن در همه مرورگرها کار می‌کند؟

بله، همه مرورگرهای مدرن از آن پشتیبانی می‌کنند. مرورگرهای بسیار قدیمی (IE10 و پایین‌تر) ممکن است به click fallback نیاز داشته باشند.

چه اتفاقی در دستگاه‌های تلفن همراه می‌افتد؟

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

آیا کاربران هنوز می‌توانند برای مرور کلیک کنند؟

بله، کلیک روی ناحیه رها کردن، پنجره فایل را باز می‌کند. هر دو روش کار می‌کنند.

آیا با چندین فایل کار می‌کند؟

کاملاً. اگر فیلد شما امکان آپلود چندگانه را فراهم کند، کاربران می‌توانند چندین فایل را به طور همزمان بکشند.

آیا نیاز به پیکربندی خاصی هست؟

با استفاده از فرم‌ساز خودکار، قابلیت کشیدن و رها کردن (drag and drop) در فیلد آپلود فایل تعبیه شده است و نیازی به تنظیمات خاصی نیست.

خلاصه

فعال کردن آپلود فایل با کشیدن و رها کردن:

1. اضافه کردن فیلد آپلود فایل – قابلیت کشیدن و رها کردن (drag and drop) در آن تعبیه شده است
2. پیکربندی تنظیمات فایل - انواع، اندازه‌ها، محدودیت‌ها
3. اطمینان از منطقه سقوط آزاد - قابل مشاهده، همراه با دستورالعمل
4. ارائه بازخورد بصری - برجسته کردن هنگام کشیدن، نمایش پیشرفت
5. پشتیبانی از کلیک مجدد – همه درگ نمی‌کنند
6. تست روی موبایل - آثار با لمس کردن برای مرور را تأیید کنید
7. دسترسی را در نظر بگیرید - پشتیبانی از صفحه کلید و صفحه خوان

نتیجه

آپلود فایل با کشیدن و رها کردن دیگر یک ویژگی خوب نیست - بلکه یک انتظار است. کاربران به کشیدن و رها کردن فایل‌ها در ایمیل، فضای ذخیره‌سازی ابری و برنامه‌های پیام‌رسان عادت کرده‌اند. فرم‌های شما نیز باید همین تجربه را ارائه دهند.

سازنده فرم خودکار شامل قابلیت کشیدن و رها کردن (drag and drop) است که در هر فیلد آپلود فایل تعبیه شده است. هیچ پیکربندی لازم نیست - فقط فیلد را اضافه کنید و کاربران می‌توانند فایل‌ها را مستقیماً روی فرم شما بکشند (drag and drop).

برای آپلود فایل مدرن آماده‌اید؟ دانلود فرم ساز خودکار و به کاربران خود تجربه کشیدن و رها کردن مورد انتظارشان را بدهید.