标签: bootstrap.min.css

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

我正在一个客户端不希望使用任何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;
}
Run Code Online (Sandbox Code Playgroud)
<label class="btn btn-default btn-file">
  Browse
  <input type="file" style="display: none;">
</label>
Run Code Online (Sandbox Code Playgroud)

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

在此输入图像描述

有什么建议使用浏览器常规上传按钮吗?

html css html5 bootstrap.min.css

6
推荐指数
1
解决办法
812
查看次数

标签 统计

bootstrap.min.css ×1

css ×1

html ×1

html5 ×1