bootstrap 4 文件输入不显示文件名 [英] bootstrap 4 file input doesn't show the file name
本文介绍了bootstrap 4 文件输入不显示文件名的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在 Bootstrap 4 中的自定义文件输入类有问题.选择要上传的文件后,文件名不显示.
我使用此代码:
<div class="自定义文件"><input type="file" class="custom-file-input" id="inputGroupFile02"><label class="custom-file-label" for="inputGroupFile02">选择文件</label><div class="input-group-append"><button class="btn btn-primary">上传</button>
知道如何在不变得太复杂的情况下修复它吗?
解决方案
您需要使用 javascript 来显示所选文件的名称,如文档中所述:https://getbootstrap.com/docs/4.5/components/forms/#file-browser
您可以在这里找到解决方案:Bootstrap 4 文件输入
这是您示例的代码:
<头><link rel="样式表";href=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css";完整性=sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"crossorigin =匿名"><script src="https://code.jquery.com/jquery-3.1.1.slim.min.js";完整性=sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n";crossorigin=匿名"></script><script src=https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"完整性=sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"crossorigin=匿名"></script><script src=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"完整性=sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"crossorigin=匿名"></script>头部><身体><div class="input-group mb-3"><div class="custom-file"><输入类型=文件"类=自定义文件输入"id="inputGroupFile02"/><label class="custom-file-label";for="inputGroupFile02">选择文件</label>
<div class="input-group-append"><button class="btn btn-primary">上传</button>