Berdasarkan solusi @claviska yang benar-benar brilian, kepada siapa semua kredit berhutang.
Input file Bootstrap 4 berfitur lengkap dengan validasi dan teks bantuan.
Berdasarkan contoh grup input, kami memiliki bidang teks input dummy yang digunakan untuk menampilkan nama file kepada pengguna, yang akan diisi dari onchangeperistiwa pada bidang file input aktual yang tersembunyi di balik tombol label. Selain menyertakan dukungan validasi bootstrap 4, kami juga memungkinkan untuk mengklik di mana saja pada input untuk membuka dialog file.
Tiga status dari input file
Tiga kemungkinan status tidak divalidasi, valid, dan tidak valid dengan atribut tag input hummy dummy required set .
Markup html untuk input
Kami hanya memperkenalkan 2 kelas khusus input-file-dummydaninput-file-btn untuk menata serta menyesuaikan perilaku yang diinginkan dengan benar. Yang lainnya adalah markup Bootstrap 4 standar.
<div class="input-group">
<input type="text" class="form-control input-file-dummy" placeholder="Choose file" aria-describedby="fileHelp" required>
<div class="valid-feedback order-last">File is valid</div>
<div class="invalid-feedback order-last">File is required</div>
<label class="input-group-append mb-0">
<span class="btn btn-primary input-file-btn">
Browse… <input type="file" hidden>
</span>
</label>
</div>
<small id="fileHelp" class="form-text text-muted">Choose any file you like</small>
Ketentuan perilaku JavaScript
Input dummy hanya perlu dibaca, seperti contoh aslinya, untuk mencegah pengguna mengubah input yang hanya dapat diubah melalui dialog file yang terbuka. Sayangnya validasi tidak terjadi pada readonlybidang sehingga kami mengaktifkan kemampuan edit input pada fokus dan blur ( peristiwa jquery onfocusin danonfocusout ) dan memastikan bahwa itu menjadi sah lagi setelah file dipilih.
Selain juga membuat bidang teks dapat diklik, dengan memicu acara klik tombol, sisa fungsi mengisi bidang dummy dibayangkan oleh @claviska.
$(function () {
$('.input-file-dummy').each(function () {
$($(this).parent().find('.input-file-btn input')).on('change', {dummy: this}, function(ev) {
$(ev.data.dummy)
.val($(this).val().replace(/\\/g, '/').replace(/.*\//, ''))
.trigger('focusout');
});
$(this).on('focusin', function () {
$(this).attr('readonly', '');
}).on('focusout', function () {
$(this).removeAttr('readonly');
}).on('click', function () {
$(this).parent().find('.input-file-btn').click();
});
});
});
Tweak gaya kustom
Yang paling penting kami tidak ingin readonlybidang melompat antara latar belakang abu-abu dan putih sehingga kami memastikannya tetap putih. Tombol span tidak memiliki kursor kursor tetapi kita perlu menambahkan satu untuk input.
.input-file-dummy, .input-file-btn {
cursor: pointer;
}
.input-file-dummy[readonly] {
background-color: white;
}
nJoy!
