استایل دهی و سفارشی کردن Input از نوع file (آپلود فایل)

سفارشی کردن input از نوع file آپلود فایل

سلام و عرض ادب خدمت دوستان و همراهان گرامی،

آپلود فایل ( Input type file ) در مرورگرها زیبا نیستند و از یک استایل خاصی پیروی میکنند. همینطور اگه نیاز باشه که در سایت های فارسی استفاده بشه، به خاطر متن لاتین از زیبایی کار، کم میکنه.

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

سفارشی کردن Input از نوع file

تغییر ظاهر تگ آپلود فایل

برای سفارش سازی آپلود فایل راه های زیادی وجود داره که هر کدام یک سری عیب هایی داره، به عنوان مثال بعضی از inputها با یک دکمه (button) طراحی شدند که باز هم ناقص بودند، در بعضی از موارد هم قابلیت لمسی در موبایل مشکل داشته که با این روش دیگر این مشکل وجود نداره.

 

خب بهتره شروع کنیم:

 

ساختار HTML آپلود فایل:

 

خب الان اگه از کد هاتون یک پیشنمایش بگیرید میبینید که آپلود فایل بدون اضافه کردن هیچ کد جاوا اسکریپتی کار میکنه …

 

مخفی کردن input :

خب مرحله دوم باید input رو مخفی کنیم.

نکته: گزینه های display: none و visibility: hidden برای مخفی کردن کار نمیکنند بنابر این ما از کد زیر استفاده میکنیم:

 

 

ویرایش و سفارشی کردن label:

برای استایل دهی به label میتونین خودتون به دلخواه کد css بنویسید یا از کدهای زیر استفاده کنید:

 

مشخص کردن انتخاب با صفحه کلید:

برای اینکه در زمان استفاده از صفحه کلید مشخص بشه ما به آپلود فایل رسیدیم (با کلید tab) میتونیم از این کد css استفاده کنیم:

 

اضافه کردن قابلیت لمسی:

برای اینکه بتونیم از قابلیت لمسی در دستگاه هایی مثل موبایل استفاده کنیم، باید کد زیر رو اضافه کنیم:

 

اضافه کردن جاوا اسکریپت:

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

برای همین باید از جاوا اسکریپت استفاده کنیم و به HTML هم کدهایی اضافه کنیم:

 

 

 

توجه: باید یک فایل جاوا اسکریپت به نام ” custom-file-input.js ” داخل قالب خودتون قرار بدید که این فایل رو میتونین دانلود کنید:

مشاهده دمو

دانلود سورس رایگان

خب این هم از آموزش سفارشی کردن input از نوع file (آپلود فایل) ، اگر سوالی داشتید در زیر همین مطلب در قسمت نظرات منتظرتون هستم.

منبع : Styling & Customizing File Inputs the Smart Way

یک دیدگاه

نظر شما