Question

我正在尝试使用自举程序4在自定义文件输入字段上方显示一个标签，并在其中显示另一个标签。我尝试了以下操作，但是未显示label 1。

<label class="w-100">label 1
  <input type="file" class="custom-file-input">
  <label class="custom-file-label">label 2</label>
</label>

当我以此方式标记正常的输入字段时，label 3会按预期显示。

<label class="w-100">label 3
  <input type="text" class="form-control">
</label>

有人知道为什么不显示label 1以及显示label 1和label 2时该怎么做吗？预先非常感谢。

这实际上是有效的：

<label for="some-id" class="w-100">label 1</label>
<div class="custom-file" style="margin-top:-1.5em" id="some-id">
  <input type="file" class="custom-file-input">
  <label class="custom-file-label">label 2</label>
</div>

，但是负边距似乎是一个不好的解决方案。没有它，标签将显示为高。

Answer 1

我只是编写了一个基本的 bootstrap 4自定义文件标签代码，希望对您有所帮助。谢谢

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<label class="w-100">label 1
  <div class="custom-file">
    <input type="file" class="custom-file-input">
    <label class="custom-file-label">label 2</label>
  </div>
</label>

Answer 2

只需运行此：

$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>
</form>

Answer 3

如果您需要支持多个文件选择（使用multiple属性），请参见以下代码。

$('.custom-file-input').on('change', function () {
    let fileName = Array.from(this.files).map(x => x.name).join(', ')
    $(this).siblings('.custom-file-label').addClass("selected").html(fileName);
});

自定义文件输入标签未显示在引导程序4

3 个答案: