Twitter bootstrap 引导文件输入，文件名不可见

选择要上载的文件后，文件名已存在，但不可见。我可以复制文件名并将其粘贴到记事本上

<div class="form-group row">
    <label asp-for="Photo" class="col-sm-2 col-form-label"></label>
    <div class="col-sm-10">
        <div class="custom-file">
            <input asp-for="Photo" class="form-control custom-file-input">
            <label class="custom-file-label" data-browse="Browse"></label>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        $('.custom-file-input').on('change', function () {
            var fileName = document.getElementById("exampleInputFile").files[0].name;
            $(this).next('.form-control-file').addClass("selected").html(fileName);
        })
    </script>
}

我看到了相似的答案和不同的代码示例，但似乎不起作用

有什么想法吗

更改为

看看这个JS

给你的

---

我面临同样的问题，解决方案是添加style=width:auto；高度：自动；不透明度：1；位置：相对位置；对我来说

所以基本上改变这条线,

<input asp-for="Photo" class="form-control custom-file-input" type="file">

对此,

<input asp-for="Photo" style="width: auto; height: auto;opacity:1; position: relative;" class="form-control" type="file">

我知道在元素上添加样式使其可见听起来很愚蠢，但是有一个.css文件试图隐藏这一点，我认为这与我的应用程序的dropzone gem库有关，可能是类似的原因导致了您的问题

---

当我检查页面源代码时，type=file。仍然文件名不可见…我还有enctype=multipart/form-data。仍然相同的行为，文件名不可见。在窗体上移动鼠标后，将显示带有文件名的工具提示。我使用两种不同的浏览器。不工作不工作，但在我添加以下css代码后：。自定义文件标签{opacity:0；}。自定义文件输入{opacity:1；}它可以工作，但看起来不太漂亮…可能是您没有共享完整的代码。这是件容易的事。运行jsfiddle。

<input asp-for="Photo" style="width: auto; height: auto;opacity:1; position: relative;" class="form-control" type="file">