Имя файла в обозревателе файлов - Bootstrap 4

Question

В файловом браузере Boostrap 4 отсутствует имя файла. Это просто сказать, выберите файл ... Я сделал для него решение javascript. Есть ли лучший способ решить эту проблему?

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); 
} 

Единственное отличие состоит в том, что вы должны добавить данные-содержимое в пролете. С другой стороны, это облегчает изменение языка.

Ссылка на бутстрапирования файловый браузер: http://v4-alpha.getbootstrap.com/components/forms/#file-browser

Answer 1

выглядит как Bootstrap теперь склоняется к не добавляя раствор JS для этого, и вместо того, чтобы, вероятно, будет в том числе и то, как ваш сценарий в документации в качестве предлагаемой реализации, на основе комментарии МДО здесь, где есть и гораздо более полное решение: https://github.com/twbs/bootstrap/issues/20813

Я обновил свой простой код для Bootstrap 4 Альфа 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:

выше покажет что-то вроде C:\\fakepath... в стиле ввода, можно также получить только имя самого файла к показать, используя 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

Вслед за ответом Джоуи, для Bootstrap 4 обнародование вы теперь использовать это не JS и не CSS:

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