Bootstrap文件上传输入（不带Javascript）

Question

我知道这个问题经常以相似的方式发布，但其中一个（在我看来）的关键点还没有得到解决，有没有一个很好的方法来做到这一点没有javascript ？ 特别是在移动设备上我有过这样的经验，即自从js坏了以后，下载的网站可以有非工作按钮或类似的东西，直到下一次刷新（可能是因为互联网太慢，或连接中断了什么），所以我想要没有JavaScript，同时保留查看文件名的功能。

这么长的故事短（TL; DR版）

• 样式文件输入看起来像bootstrap
• 没有Javascript
• 文件名显示

有办法做到这一点吗？

Answer 1

1. 完成
＆＃13;
＆＃13;
document.querySelector('#file').addEventListener('change', function() {
  var val = this.value.split(/\\/g);
  document.querySelector('#filename').innerHTML = val[val.length - 1];
});
＆＃13;
.wrapper {
  position:relative;  
  cursor:pointer;
  display:inline-block;
}

input {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1;
  opacity:0;
  cursor:pointer;
}
＆＃13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

<div class="wrapper">
  <input id="file" type="file" />  
  <span class="btn btn-primary btn-file">
    <i class="glyphicon glyphicon-folder-open"></i>
    <span id="filename">Select File</span>
  </span>
</div>
＆＃13;
＆＃13;
＆＃13;
1. 完成。
2. 无法完成。