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

امروز می خواهیم یک روش اساسی تر برای بهبود ورودی 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 تست شده است

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

منبع