Bootstrap：选择后显示文件名 [英] Bootstrap : Show file name after select

问题描述

在我的表单中，我有一个文件上传按钮。我想显示已选择的文件名称。不过，我似乎无法获取文件的名称，并在我的文本框中显示： codepen

In my form I have a file upload button. I want to show the file name that has been selected. However I cant seem to grab the name of the file and show it in my text box: 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>

任何帮助将不胜感激

Any help will be greatly appreciated

推荐答案

您还需要为输入设置 Val ...更改它：

You need to set the Val for the input too ... change it:

从.html（）到.val（）

From .html() to .val()

<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>

更新CodePen

Updated CodePen

这篇关于Bootstrap：选择后显示文件名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！