Question

I'm new to front-end development, and I'm trying to open a file (an .xml file). I have a drop-down menu called File with the structure:

File:

Open
Save

I want that when I press the "Open" tab, the file select window appear so I can choose the file. I tried to put an <input type="file"> inside the <a> element like that:

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

But a huge button appears next to it, and I don't want that to appear, I just want It behaviour.

Here is a little fiddle to show the scenario fiddle

打开文件

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>

_{Fiddle，如果您愿意。}

Answer 2

获得打开文件对话框的唯一方法是使用<input type="file">或浏览器插件。假设你想避免插件，这意味着你必须做一些聪明的样式来改变按钮的外观。一种技术是将按钮放在链接上方，使其几乎完全透明。

通过<a> click instead of <input/>?

2 个答案: