javascript - 如何使用链接而不是普通的文件输入按钮来访问资源管理器文件和文件夹

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>

但是，用 anchor 包裹标签不是有效的 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>

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