设置文件上传按钮而不使用javascript

Question

我正在开设一个网站，客户不希望使用任何javascript 。我已经使用以下代码成功地为我的网站设置了文件更新按钮。

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}

<label class="btn btn-default btn-file">
  Browse
  <input type="file" style="display: none;">
</label>

但是，一旦选择了文件，不使用javascript，我就无法在按钮旁边显示文件名，如下例所示。

使用浏览器常规上传按钮的任何建议吗？

Answer 1

通过设置浏览按钮的z-index，您可以尝试：

＆＃13;

＆＃13;

.btn-file {
  position: absolute;
  text-align: center;
  overflow: hidden;
  border-radius: 5px;
  z-index: 2;
  min-width: 84px;
  min-height: 35px;
  background-color: white;
  border: 3px solid cyan;
  top: 0;
  left: 1;
}
input[type=file] {
  float: left;
  position: relative;
  background: white;
  cursor: pointer;
  background-color: white;
}

＆＃13;

<label class="btn btn-default ">
  <span class="btn-file">Browse</span> 
  <input type="file">
</label>

＆＃13;

＆＃13;

＆＃13;

OR

另一种方法是使用bootstrap：

https://jsfiddle.net/wesfe5jy/3/