Tên tệp trong trình duyệt tệp - Bootstrap 4

Question

Trình duyệt tệp trong Boostrap 4 thiếu tên tệp. Nó chỉ nói Chọn tập tin ... Tôi đã thực hiện một giải pháp javascript cho nó. Có cách nào tốt hơn để giải quyết nó?

HTML

<label class="file"> 
    <input type="file" id="file1" > 
    <span class="file-custom" data-content="Choose file..."></span> 
</label> 

jQuery

$("input[type=file]").change(function(){ 
    var fieldVal = $(this).val(); 
    if (fieldVal != undefined || fieldVal != "") { 
     $(this).next(".file-custom").attr('data-content', fieldVal); 
    } 
}); 

CSS

.file-custom:after { 
    content: attr(data-content); 
} 

Sự khác biệt duy nhất là bạn phải thêm dữ liệu nội dung vào span. Mặt khác, nó giúp thay đổi ngôn ngữ dễ dàng hơn.

Liên kết với trình duyệt tập tin bootstraps: http://v4-alpha.getbootstrap.com/components/forms/#file-browser

Answer 1

Hình như Bootstrap hiện đang nghiêng về phía không thêm một giải pháp JS cho điều này và thay vào đó có thể sẽ được bao gồm một cái gì đó giống như kịch bản của bạn trong tài liệu như một thực hiện đề nghị, dựa trên bình luận MDO ở đây, nơi đó cũng là một giải pháp nhiều hơn nữa hoàn thành: https://github.com/twbs/bootstrap/issues/20813

tôi đã cập nhật mã đơn giản của bạn cho Bootstrap 4 Alpha 6.

jQuery

$("input[type=file]").change(function() { 
    var fieldVal = $(this).val(); 
    if (fieldVal != undefined || fieldVal != "") { 
    $(this).next(".custom-file-control").attr('data-content', fieldVal); 
    } 
}); 

CSS

.custom-file-control:after { 
    content: attr(data-content) !important; 
} 

---

Edit:

trên sẽ hiển thị một cái gì đó giống như C:\\fakepath... trong đầu vào theo kiểu, chúng ta cũng có thể có được chỉ tên tập tin bản thân để hiển thị, sử dụng event.target.files[0].name:

$("input[type=file]").change(function (event) { 
    var fieldVal = event.target.files[0].name; 
    if (fieldVal != undefined || fieldVal != "") { 
    $(this).next(".custom-file-control").attr('data-content', fieldVal); 
    } 
}); 

Answer 2

Theo dõi về câu trả lời của Joey, cho Bootstrap 4 phát hành nào bây giờ bạn sẽ sử dụng này JS và không có CSS:

$("input[type=file]").change(function() { 
    var fieldVal = $(this).val(); 
    if (fieldVal != undefined || fieldVal != "") { 
     $(this).next(".custom-file-label").text(fieldVal); 
    } 
});