如何使用链接而不是普通的文件输入按钮来浏览文件和文件夹

Question

我想创建一个链接，当单击时显示文件/文件夹资源管理器，而不是通常在网页中使用的文件输入（文件资源管理器按钮）。这真的可能吗？

我唯一能做到这一点的方法是使用Bootstrap FileStyle，然而，它仍然是一个按钮，看起来比默认的文件WW3输入按钮更好。

<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

通过JavaScript：

$(":file").filestyle({badge: false});

通过数据属性：

<input type="file" class="filestyle" data-badge="false">

Answer 1

您可以使用此

<input id="input_file" type="file" style="display:none;">
<a href="#"><label for="input_file">Trigger the file input</label></a>

不过，用锚点包装标签不是有效的HTML。我建议使用jQuery或Javascript来完成这项工作。

下面是使用jQuery实现您想要的内容的示例。

$(document).ready(function(){
  $("#trigger-input-file").click(function(){
    $('input[type="file"]').trigger("click");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="input-file" style="display:none;">
<a href="#"><label for="input-file">Trigger input file without script</label></a><br><br>
<a href="#" id="trigger-input-file">Trigger input file with the jQuery script</a>

希望得到帮助！干杯

Answer 2

当然。屏蔽输入

div {
  position: relative;
  }
label {
  position: absolute;
  left: 0;
  top: 0;
}
a {
  background-color: #fff;
  display: block;
  width: 200px;
  height: 30px;
  pointer-events: none;
  line-height: 30px;
  text-align: center;
}

<div>
  <input type="file" id="qwe">
  <label for="qwe"><a href="">Select a file</a></label>
</div>

Answer 3

您可以这样做：

<input id="file" type="file">

对于文件资源管理器链接：

<a href="#"><label for="file">test</label></a>

这里有一个演示：https://jsfiddle.net/1qztex41/

正如@Jandrode所提到的，使用#file { display: none; }