文件浏览器中的文件名 - Bootstrap 4答案

【问题标题】：Filename in file browser - Bootstrap 4文件浏览器中的文件名 - Bootstrap 4
【发布时间】：2016-09-29 10:29:18
【问题描述】：

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

【问题讨论】：

这实际上不是 Bootstrap 本身的问题（4 也远未准备好生产，所以你不应该在这里寻求帮助）。老实说，您的解决方案（编辑 CSS 内容）可能是最简洁的方法。
我知道第 4 版还没有准备好。但我们仍然使用它，所以这可能是一个临时解决方案......时间会证明一切
谢谢，这节省了我一些时间。我正在使用您稍作修改的解决方案。

标签： jquery html css twitter-bootstrap-4

【解决方案1】：

看起来 Bootstrap 现在倾向于不为此添加 JS 解决方案，而是可能会在文档中包含类似于您的脚本的内容作为建议的实现，基于此处的 mdo 的 cmets，其中还有一个更完整的解决方案： 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);
  }
});

【讨论】：

【解决方案2】：

按照 Joey 的回答，对于 Bootstrap 4 公开发布，您现在将使用这个 JS 而不是 CSS：

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

【讨论】：