在不使用 javascript 的情况下设置文件上传按钮的样式答案

【问题标题】：Style the file upload button without using javascript在不使用 javascript 的情况下设置文件上传按钮的样式
【发布时间】：2016-09-30 01:29:48
【问题描述】：

我正在开发一个客户不希望使用任何 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，我将无法在按钮旁边显示文件名，如下例所示。

对使用浏览器的常规上传按钮执行此操作有什么建议吗？

【问题讨论】：

只是我的想法，但您可以在服务器端设置一个监听器，以便在上传文件时修改页面。例如，上传文件时，重新加载页面，以及发送页面请求时，包含文件名作为页面渲染时间的参数。
您是否可以访问后端，如果可以，使用的是什么软件？
在用户工作时重新加载页面没有意义。也浪费了服务器的处理时间。

标签： css html bootstrap.min.css

【解决方案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>

或

另一种方式是使用bootstrap：

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

【讨论】：