CSS

تغییر استایل فیلد File با Bootstrap 3

تبلیغات
4 سوالی شهرداری
کانال تلگرام فتولیا

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

امروز می خواهیم یک روش اساسی تر برای بهبود ورودی File با استفاده از فریم ورک Bootstrap برایتان نشان دهیم . لطفا با ما باشید

شروع ساده کار

اجازه دهید کار را با ایجاد یک دکمه الکی با یک فیلد فایل داخلش ، شروع کنیم

و سپس مقداری css به اون اضافه می کنیم

به این شکل می توانید مثل button ها در bootstrap از ورودی فایل استفاده کنید و به آن استایل دهید.

bootstrap-file-input-example

گرفتن بازخورد از فیلد

حالا به سخت ترین بخش کار می رسیم . در این بخش می خواهیم به کاربران نشان دهیم چه فایل هایی را انتخاب کرده اند . برای این از جادوی jQuery استفاده می کنیم تا همیشه یک چشمش به فیلد های file باشد و هر موقع فایلی انتخاب شد یک رویداد بنام fileselect را فراخوانی کند .

حالا یک مثال از نحوه استفاده رویداد بالا

با استفاده از پارامترهای numFiles و label می توانید نام فایل ها و تعدادشان را به کاربر نمایش دهید .

این روش در IE8–IE11 و نسخه های اخیر مرورگرهای Chrome , Firefox, Opera, Safari تست شده است

See the Pen vAgmd by Cory LaViska (@claviska) on CodePen.

منبع

پاسخ دهید

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