我正在尝试使用自举程序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>
,但是负边距似乎是一个不好的解决方案。没有它,标签将显示为高。
答案 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);
});