Question

在我的表单中，我有一个文件上传按钮。我想显示已选择的文件名。但是我似乎无法获取文件的名称并在我的文本框中显示：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>

非常感谢任何帮助

Answer 1

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

从.html（）到.val（）

＆＃13;

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

＆＃13;

Updated CodePen

Answer 2

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

的值

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

检查此jsfiddle

Answer 3

如果您有多个文件上传输入，则可以使用它来更新实际输入中的文件名

$('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);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Bootstrap：选择后显示文件名

3 个答案: