Dựa trên giải pháp @claviska hoàn toàn xuất sắc, người mà tất cả các khoản tín dụng đều nợ.
Đầy đủ tính năng nhập tệp Bootstrap 4 với xác nhận và văn bản trợ giúp.
Dựa trên ví dụ về nhóm đầu vào, chúng ta có trường văn bản đầu vào giả được sử dụng để hiển thị tên tệp cho người dùng, được điền từ onchangesự kiện trên trường tệp đầu vào thực tế ẩn sau nút nhãn. Ngoài việc bao gồm hỗ trợ xác thực bootstrap 4, chúng tôi cũng có thể nhấp vào bất cứ nơi nào trên đầu vào để mở hộp thoại tệp.
Ba trạng thái của tập tin đầu vào
Ba trạng thái có thể là không hợp lệ, hợp lệ và không hợp lệ với requiredtập thuộc tính thẻ đầu vào html giả .
Đánh dấu Html cho đầu vào
Chúng tôi chỉ giới thiệu 2 lớp tùy chỉnh input-file-dummyvà input-file-btnđể tạo kiểu và kết nối đúng hành vi mong muốn. Mọi thứ khác là đánh dấu Bootstrap 4 tiêu chuẩn.
<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>
Quy định hành vi JavaScript
Đầu vào giả chỉ cần được đọc, theo ví dụ ban đầu, để ngăn người dùng thay đổi đầu vào chỉ có thể được thay đổi thông qua hộp thoại mở tệp. Thật không may, xác thực không xảy ra trên readonlycác trường vì vậy chúng tôi chuyển đổi khả năng chỉnh sửa của đầu vào trên tiêu điểm và mờ ( sự kiện jquery onfocusin và onfocusout) và đảm bảo rằng nó sẽ trở lại hợp lệ một lần nữa khi tệp được chọn.
Ngoài việc làm cho trường văn bản có thể nhấp được, bằng cách kích hoạt sự kiện nhấp chuột của nút, phần còn lại của chức năng điền vào trường giả đã được @claviska hình dung.
$(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();
});
});
});
Tùy chỉnh phong cách tùy chỉnh
Quan trọng nhất là chúng tôi không muốn readonlytrường nhảy giữa nền xám và trắng để chúng tôi đảm bảo nó vẫn trắng. Nút span không có con trỏ con trỏ nhưng dù sao chúng ta cũng cần thêm một con trỏ cho đầu vào.
.input-file-dummy, .input-file-btn {
cursor: pointer;
}
.input-file-dummy[readonly] {
background-color: white;
}
Xin chào!
