Trong bài viết này, chúng ta sẽ hiểu tùy chọn tải lên tệp Bootstrap 4 với sự trợ giúp của các ví dụ khác nhau
Bạn có ý nghĩa gì khi tải lên tệp Bootstrap 4?
Trong Bootstrap 4, đầu vào tệp là trường mà người dùng có thể tải lên một hoặc nhiều tệp như ảnh, tài liệu, csv, tệp phương tiện, v.v. từ bộ nhớ cục bộ
Hãy lấy một số ví dụ về Bootstrap 4 Tùy chọn tải lên tệp
ví dụ 1
Giải trình
Trong ví dụ trên, chúng tôi đã tạo tùy chọn tải lên tệp tùy chỉnh ở dạng với sự trợ giúp của bootstrap 4
Đầu vào tệp tùy chỉnh không còn tồn tại nên để thay đổi
Select file...
6, bạn cần sử dụng JS hoặc một số CSS như thế nàyBootstrap 4. 4
Hiển thị tên tệp đã chọn cũng có thể được thực hiện bằng JavaScript đơn giản. Đây là một ví dụ giả định đầu vào tệp tùy chỉnh tiêu chuẩn có nhãn là phần tử anh chị em tiếp theo của đầu vào
document.querySelector['.custom-file-input'].addEventListener['change',function[e]{
var fileName = document.getElementById["myInput"].files[0].name;
var nextSibling = e.target.nextElementSibling
nextSibling.innerText = fileName
}]
https. // codeply. com/p/LtpNZllird
Bootstrap 4. 1+
Bây giờ trong Bootstrap 4. 1 "Chọn tệp. " văn bản giữ chỗ được đặt trong
Select file...
7
Select file...
Thay đổi văn bản nút "Duyệt" yêu cầu thêm một chút CSS hoặc SASS. Cũng lưu ý cách dịch ngôn ngữ hoạt động bằng cách sử dụng thuộc tính
Select file...
0.custom-file-input ~ .custom-file-label::after {
content: "Button Text";
}
https. // codeply. com/go/gnVCj66Efp [CSS]
https. // codeply. com/go/2Mo9OrokBQ [SASS]
Bootstrap khác 4. 1 lựa chọn
Ngoài ra, bạn có thể sử dụng plugin nhập tệp tùy chỉnh này
https. //www. mật mã. com/go/uGJOpHUd8L/file-input
Bootstrap 4 Alpha 6 [Câu trả lời gốc]
Tôi nghĩ có 2 vấn đề riêng biệt ở đây
1 - Cách thay đổi trình giữ chỗ ban đầu và văn bản nút
Trong Bootstrap 4, giá trị giữ chỗ ban đầu được đặt trên
Select file...
1 với phần tử CSS giả
Select file...
2 dựa trên ngôn ngữ HTML. Nút tệp ban đầu [không thực sự là một nút nhưng trông giống như một nút] được đặt bằng phần tử CSS giả
Select file...
3. Các giá trị này có thể được ghi đè bằng CSS________số 82 - Cách lấy giá trị tên tệp đã chọn và cập nhật đầu vào để hiển thị giá trị
Khi một tệp được chọn, giá trị có thể được lấy bằng JavaScript/jQuery
$['.custom-file-input'].on['change',function[]{
var fileName = $[this].val[];
}]
Tuy nhiên, vì văn bản giữ chỗ cho đầu vào là một phần tử giả, nên không có cách nào dễ dàng để thao tác điều này với Js/jQuery. Tuy nhiên, bạn có thể có một lớp CSS khác ẩn nội dung giả sau khi tệp được chọn
Select file...
0Sử dụng jQuery để chuyển lớp
Select file...
4 trên lớp
Select file...
5 sau khi tệp được chọn. Điều này sẽ ẩn giá trị giữ chỗ ban đầu. Sau đó đặt giá trị tên tệp trong khoảng thời gian
Select file...
6
Select file...
4
Select file...
5