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

【问题标题】：How to use a link instead of the normal file input button to explorer files and folders如何使用链接而不是普通的文件输入按钮来浏览文件和文件夹
【发布时间】：2016-07-28 07:05:32
【问题描述】：

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

我设法做到这一点的唯一方法是使用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">

【问题讨论】：

标签： javascript html css file

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

希望对您有所帮助！干杯！

【讨论】：

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

【讨论】：

OP 要求的是链接而不是按钮。
对于理解原则的决定并不重要

【解决方案3】：

你可以这样做：

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

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

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

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

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

【讨论】：

这是无效的 HTML。标签不能是锚的后代。
一个不好的例子，应该遵循 HTML 规则。
@Evolutio — OP 没有要求依赖无效 HTML 或使用标签的解决方案。