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

时间:2019-03-29 13:08:36

标签: html bootstrap-4

我正在尝试使用自举程序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 1label 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>

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

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

只需运行此:

$(".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>

答案 2 :(得分:0)

如果您需要支持多个文件选择(使用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);
});