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

我不确定是否理解正确，但这里是经过修改的代码段：

＆＃13;

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

＆＃13;

<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 yourHiddenClassName"></span>
</div>

＆＃13;

Answer 2

实际上Kamil的代码是正确的，你看到的这一行是由构成代码的iframe生成的，但仅用于堆栈页面，我只是添加了一个<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>

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

2 个答案: