Tệp đầu vào Bootstrap 4

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ày

Bootstrap 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ố 8

2 - 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...
        

0

Sử 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

Làm cách nào để tùy chỉnh đầu vào tệp Bootstrap?

Làm cách nào để tạo kiểu cho nút tệp đầu vào Bootstrap?

Làm cách nào để tải tệp lên bằng Bootstrap?

Loại đầu vào trong Bootstrap là gì?