文件浏览器中的文件名 - 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);
}

唯一的区别是您必须向跨度添加数据内容.另一方面,它更容易改变语言.

链接到Bootstraps文件浏览器:http: //v4-alpha.getbootstrap.com/components/forms/#file-browser

Answer 1

看起来Bootstrap现在倾向于不为此添加JS解决方案,而是可能会在文档中包含类似脚本的内容作为建议的实现,基于mdo的评论,其中还有一个更完整的解决方案: https: //github.com/twbs/bootstrap/issues/20813

我已经更新了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;
}

编辑:

上面将显示类似于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);
  }
});