jQuery bootstrap 4 文件输入不显示文件名
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48613992/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap 4 file input doesn't show the file name
提问by Terchil? Marian
I have a problem with the custom-file-input class in Bootstrap 4. after I chose which file I want to upload the filename do not show.
我在 Bootstrap 4 中的自定义文件输入类有问题。在我选择要上传的文件后，文件名不显示。
I use this code:
我使用这个代码：
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile02">
<label class="custom-file-label" for="inputGroupFile02">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-primary">Upload</button>
</div>
</div>
Any idea how I can fix it without getting too complicated?
知道如何在不变得太复杂的情况下修复它吗？
回答by debe
You need to use javascript to show the name of the choosed file, as written in the documentation: https://v4-alpha.getbootstrap.com/components/forms/#file-browser
您需要使用 javascript 来显示所选文件的名称，如文档中所述：https: //v4-alpha.getbootstrap.com/components/forms/#file-browser
Here you can find the solution: Bootstrap 4 File Input
在这里您可以找到解决方案：Bootstrap 4 File Input
That's the code for your example:
这是您示例的代码：
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwtheitroadesjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile02"/>
<label class="custom-file-label" for="inputGroupFile02">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-primary">Upload</button>
</div>
</div>
<script>
$('#inputGroupFile02').on('change',function(){
//get the file name
var fileName = $(this).val();
//replace the "Choose a file" label
$(this).next('.custom-file-label').html(fileName);
})
</script>
</body>
</html>
回答by Anuja Deshpande Patil
I have used following for the same:
我已经使用以下相同：
<script type="application/javascript">
$('input[type="file"]').change(function(e){
var fileName = e.target.files[0].name;
$('.custom-file-label').html(fileName);
});
</script>
回答by VDWWD
The answer of Anuja Patil only works with a single file input on a page. This works if there are more than one. This snippet will also show all files if multipleis enabled.
Anuja Patil 的答案仅适用于页面上的单个文件输入。如果有多个，这将起作用。如果multiple启用，此代码段还将显示所有文件。
<script type="text/javascript">
$('.custom-file input').change(function (e) {
var files = [];
for (var i = 0; i < $(this)[0].files.length; i++) {
files.push($(this)[0].files[i].name);
}
$(this).next('.custom-file-label').html(files.join(', '));
});
</script>
Note that $(this).next('.custom-file-label').html($(this)[0].files.join(', '));does not work. So that is why the forloop is needed.
请注意，$(this).next('.custom-file-label').html($(this)[0].files.join(', '));这不起作用。所以这就是为什么for需要循环。
If you never work with mulitple files in the file upload, this simpler snippet can be used.
如果您从不使用文件上传中的多个文件，则可以使用这个更简单的代码段。
<script type="text/javascript">
$('.custom-file input').change(function (e) {
if (e.target.files.length) {
$(this).next('.custom-file-label').html(e.target.files[0].name);
}
});
</script>
回答by stardust4891
$(document).on('change', '.custom-file-input', function (event) {
$(this).next('.custom-file-label').html(event.target.files[0].name);
})
Best of all worlds. Works on dynamically created inputs, and uses actual file name.
世界上最好的。适用于动态创建的输入，并使用实际文件名。
回答by kexxcream
This works with Bootstrap 4.1.3:
这适用于 Bootstrap 4.1.3：
<script>
$("input[type=file]").change(function () {
var fieldVal = $(this).val();
// Change the node's value by removing the fake path (Chrome)
fieldVal = fieldVal.replace("C:\fakepath\", "");
if (fieldVal != undefined || fieldVal != "") {
$(this).next(".custom-file-label").attr('data-content', fieldVal);
$(this).next(".custom-file-label").text(fieldVal);
}
});
</script>
回答by philyawj
Johann-S solution works great. (And it looks like he created the awesome plugin)
Johann-S 解决方案效果很好。（看起来他创建了很棒的插件）
The Bootstrap 4.3 documentation example page uses this plugin to modify the filename: https://github.com/Johann-S/bs-custom-file-input
Bootstrap 4.3 文档示例页面使用此插件修改文件名：https: //github.com/Johann-S/bs-custom-file-input
Use the Bootstrap custom file input classes. Add the plugin to your project, and add this code in your script file on the page.
使用Bootstrap 自定义文件输入类。将插件添加到您的项目中，并将此代码添加到页面上的脚本文件中。
$(document).ready(function () {
bsCustomFileInput.init()
})
回答by Vassilis
When you have multiple files, an idea is to show only the first file and the number of the hidden file names.
当你有多个文件时，一个想法是只显示第一个文件和隐藏文件名的数量。
$('.custom-file input').change(function() {
var $el = $(this),
files = $el[0].files,
label = files[0].name;
if (files.length > 1) {
label = label + " and " + String(files.length - 1) + " more files"
}
$el.next('.custom-file-label').html(label);
});
回答by Johann-S
If you want you can use the recommended Bootstrap plugin to dynamize your custom file input: https://www.npmjs.com/package/bs-custom-file-input
如果你愿意，你可以使用推荐的 Bootstrap 插件来动态化你的自定义文件输入：https: //www.npmjs.com/package/bs-custom-file-input
This plugin can be use with or without jQuery and works with React an Angular
这个插件可以在有或没有 jQuery 的情况下使用，并且可以与 React 和 Angular 一起使用
回答by Jorge Santos Neill
This code works for me:
这段代码对我有用：
<script type="application/javascript">
$('#elementID').change(function(event){
var fileName = event.target.files[0].name;
if (event.target.nextElementSibling!=null){
event.target.nextElementSibling.innerText=fileName;
}
});
</script>
