通过<a>点击而不是<input>打开文件？

Question

我是前端开发的新手,我正在尝试打开一个文件(.xml文件).我有一个名为File的下拉菜单,结构如下:

文件:

• 打开
• 保存

我希望当我按下"打开"选项卡时,会出现文件选择窗口,以便我可以选择该文件.我试着把这样<input type="file">的<a>元素放在里面:

<a href="#" onclick="openFile()"><input type="file">Open<a>

但是它旁边会出现一个巨大的按钮,我不希望它出现,我只想要它的行为.

这是一个小小的小提琴,以显示情景小提琴

Answer 1

您可以隐藏输入对话框,并在单击链接后使用JavaScript选择它(我假设您正在尝试在小提琴中执行此操作):

function openFile() {
  document.querySelector("li input").click();
}

li input {
  visibility: none;
  width: 0;
}

<div class="btn-group" role="group" aria-label="...">
  <!--Button File-->
  <div class="btn-group" role="group">
    <button>File</button>
    <ul class="dropdown-menu" role="menu">
      <li>
        <input type="file" /><a href="#" onclick="openFile()">Open</a>
      </li>
      <li><a href="#">Save</a>
      </li>
    </ul>
  </div>
</div>

_{小提琴,如果你愿意的话.}