تغییر استایل و شیوه نمایش فیلد فایل معمولا یکی از مشکلات طراحی فرم هاست .راه حل های زیادی (+ و + و + و +) هم برای بهبود آن وجود دارد که تقریبا در تمام مرورگرها تغییر شیوه نمایش فیلد ورودی فایل را بهتر کنیم .متاسفانه خیلی از این روش ها دست و پا گیر هستند و ممکن است مرورگرها آن طور که ما انتظار داریم آن را نشان ندهند .
امروز می خواهیم یک روش اساسی تر برای بهبود ورودی File با استفاده از فریم ورک Bootstrap برایتان نشان دهیم . لطفا با ما باشید
شروع ساده کار
اجازه دهید کار را با ایجاد یک دکمه الکی با یک فیلد فایل داخلش ، شروع کنیم
<span class="btn btn-default btn-file"> Browse <input type="file"> </span>
و سپس مقداری css به اون اضافه می کنیم
.btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; }
به این شکل می توانید مثل button ها در bootstrap از ورودی فایل استفاده کنید و به آن استایل دهید.
گرفتن بازخورد از فیلد
حالا به سخت ترین بخش کار می رسیم . در این بخش می خواهیم به کاربران نشان دهیم چه فایل هایی را انتخاب کرده اند . برای این از جادوی jQuery استفاده می کنیم تا همیشه یک چشمش به فیلد های file باشد و هر موقع فایلی انتخاب شد یک رویداد بنام fileselect
را فراخوانی کند .
$(document).on('change', '.btn-file :file', function() { var input = $(this), numFiles = input.get(0).files ? input.get(0).files.length : 1, label = input.val().replace(/\\/g, '/').replace(/.*\//, ''); input.trigger('fileselect', [numFiles, label]); });
حالا یک مثال از نحوه استفاده رویداد بالا
$(document).ready( function() { $('.btn-file :file').on('fileselect', function(event, numFiles, label) { console.log(numFiles); console.log(label); }); });
با استفاده از پارامترهای numFiles و label می توانید نام فایل ها و تعدادشان را به کاربر نمایش دهید .
این روش در IE8–IE11 و نسخه های اخیر مرورگرهای Chrome , Firefox, Opera, Safari تست شده است