۹ قطعه کد متن باز برای فیلد آپلود فایل

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

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

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

1. آپلود فایل به صورت فلت

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

شما می‌توانید به سادگی این فیلد را وارد صفحه وب‌تان کنید و از ظاهر زیبایی که دریافت می‌کنید لذت ببرید. تنها کاری که باید بکنید -سلیقه- این است که طرح رنگی مورد علاقه‌تان را قرار دهید و احتمالا موقعیت آن را تغییر دهید.

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

2. آپلود فایل سفارشی

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

برای اثبات این قضیه کافی‌ست به حالت آپلود در وبسایت‌هایی مانند گوگل، دراپ‌باکس و فیسبوک نگاه کنید. همه آن‌ها از یک باکس بزرگ که از درگ-درپ پشتیبانی می‌کنند ساخته شده اند و در داخل آن‌ها نیز یک دکمه برای آپلود فایل استفاده شده است. این دقیقا حالتی است که این قطعه کد فراهم کرده است.

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

اگر خودتان نیز می‌توانید با جاوااسکریپت کارهای بزرگی را انجام دهید پس مطمئنا می‌توانید از این ورودی، قالب فوق العاده ‌ای ایجاد کنید.

۳- آپلودر انیمیشنی واکنشگرا

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

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

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

اگر این المان را وارد وبسایت خود کنید، مطمئنا نیاز خواهید داشت که در کنار این، یک ورودی به صورت دکمه نیز ایجاد کنید.

۴- آپلودر سفارشی

پروژه‌های توسعه که روزانه انجام می‌دهید، برای افزایش توانایی‌تان بسیار مناسب هستند. Drew Vosburg توسعه دهنده این مورد، از این رویکرد استفاده می‌کند و با این کار یک فرم آپلود بسیار زیبا را ایجاد کرده است.

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

قسمت قابل کلیک در HTML توسط CSS استایل دهی شده است. این المنت برچسب به فیلد ورودی متصل شده که ظاهرا مخفی شده است. استفاده از این المان بسیار لذت‌بخش است و قابلیت خوبی را برای ادامه کار به شما می‌دهد.

۵- رابط آپلود با تصویر استوک

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

این رابط تصاویر را از طریق جاوااسکریپت آپلود کرده و بعد به base64 تبدیل می‌کند تا بتوانید در CSS جایگذاری کنید.

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

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

۶- رابط کاربری آبی ساده برای آپلود

اگر به دنبال موردی هستید که در آن خبری از جاوااسکریپت نیست، پس این مورد از Stephen Baker می‌تواند انتخاب خوبی باشد.

این مورد به صورت کامل از CSS3 برای استایل دهی به صفحه و دکمه استفاده کرده است. همچنین قسمت آیکون آپلود آن از Font Awesome استفاده می‌کند.

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

۷- ورودی فایل آپلود سفارشی با جی‌کوئری

در طراحی و توابع این مورد، توسعه دهنده Terry Young از جی‌کوئری استفاده کرده است. استایل‌های آن ساده است و به راحتی می‌توان همه آن‌ها را تغییر داد. استفاده و تغییر این مورد ممکن است نیاز به دانش جی‌کوئری داشته باشد پس اگر در این زمینه تخصص ندارید ممکن است کار با آن برای‌تان دشوار باشد.

۸- ورودی فایل با رابط کاربری فلت

در این بین می‌توانید در طرحی که Geoffrey Crofte ایجاد کرده است تفاوت‌هایی را مشاهده کنید. این مورد تا حدی از جاوااسکریپت استفاده می‌کند اما طراحی کلی آن از سی‌اس‌اس بهره می‌برد. 

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

تابع بازگشتی در جاوااسکریپت مدیریت می شود، پس در آنجاست که شما می توانید ورودی‌های‌تان را مدیریت نمایید. 

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

۹- چند فیلد برای آپلود

آخرین مورد این لیست کمی ممکن است دارای ویژگی جدیدی باشد، در کنار آن ظاهر زیبایی نیز دارد – اما در نهایت چیزی که مهم است کارایی و کارکرد آن است. 

این طرح بدین منظور ایجاد شده است که بتوان همزمان چندین فایل را با همدیگر آپلود کرد. معمولا در یک وبسایت شما چنین حالتی را مشاهده نمی‌کنید، اما در نهایت جدای از طراحی، مدیریت چندگانه آپلودها کاری است که باید در قسمت back-end وبسایت مدیریت شود. 

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

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

منبع