jquery - 如何在上传文件前隐藏名称输入字段

Question

我想隐藏文件名的输入。我在 CSS 中尝试过，但它不起作用。浏览文件后，我想显示输入文件名。在 CSS 中可能吗？

.input-group-btn{
  width:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="input-group">
  <span class="input-group-btn">
    <span class="btn btn-primary" onclick="$(this).parent().find('input[type=file]').click();">Choose File</span>
    <input name="uploaded_file" onchange="$(this).parent().parent().find('.form-control').html($(this).val().split(/[\\|/]/).pop());" style="display: none;" type="file">
  </span>
  <span class="form-control"></span>
</div>

Answer 1

实际上Kamil的代码是对的，你看到的这一行是由包含代码的iframe生成的，但只是用于stackover页面，我只是添加了一个<br/>现在看起来不错。

.input-group-btn{
  width:10px;
}
.yourHiddenClassName:empty{
  display:none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<br/><br/><div class="input-group">
  <span class="input-group-btn">
    <span class="btn btn-primary" onclick="$(this).parent().find('input[type=file]').click();">Choose File</span>
    <input name="uploaded_file" onchange="$(this).parent().parent().find('.form-control').html($(this).val().split(/[\\|/]/).pop());" style="display: none;" type="file">
  </span>
  <span class="form-control yourHiddenClassName"></span>
</div>