Bootstrap :选择后显示文件名

tyg4sfes  于 2023-08-01  发布在  Bootstrap
关注(0)|答案(4)|浏览(158)

在我的表单中,我有一个文件上传按钮。我想显示已选择的文件名。然而,我似乎无法抓住文件的名称并将其显示在我的文本框中:codepen here

<div class="input-group">
    <label class="input-group-btn">
        <span class="btn btn-primary">
            Browse&hellip; <input id="my-file-selector" type="file" style="display:none;" onchange="$('#upload-file-info').html($(this).val());">
        </span>
    </label>
    <input type="text" class="form-control" id="upload-file-info" readonly>
</div>

字符串
任何帮助将不胜感激

nr7wwzry

nr7wwzry1#

您还需要设置输入的瓦尔...更改它:
从.html()到.瓦尔()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
    <label class="input-group-btn">
        <span class="btn btn-primary">
            Browse&hellip; <input id="my-file-selector" type="file" style="display:none;" onchange="$('#upload-file-info').val($(this).val());">
        </span>
    </label>
    <input type="text" class="form-control" id="upload-file-info" readonly>
</div>

字符串
Updated CodePen

kuarbcqp

kuarbcqp2#

您可以检查e.target.files [0].name的值

$('input:file').change(
    function(e){
        console.log(e.target.files[0].name);
    });

字符串
检查此jsfiddle

oyt4ldly

oyt4ldly3#

如果您有多个文件上传输入,您可以使用此更新文件名的实际输入

$('input[type="file"]').change(function(e) {
  var fileName = e.target.files[0].name;
  // change name of actual input that was uploaded
  $(e.target).next().html(fileName);
});

个字符

ymdaylpp

ymdaylpp4#

对于多个:

$('input[type="file"]').change(function(e) {
                            let fileNames = $.map(e.target.files, function(val) {
                                return val.name;
                            }).join(', ');
                            $(e.target).next().html(fileNames);
                        });

字符串

相关问题