设置文件上传按钮而不使用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 您可以尝试：

.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;
}

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

或者

另一种方法是使用引导程序：

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