javascript - 输入类型=附加到 onclick 事件的文件

Question

我有一个这样的菜单:

<ul class="sub">
    <li><a href="#">New</a></li>
    <li><a href="#">Open</a></li>
    <li><a href="#">Save</a></li>
    <li><a href="#">Help</a></li>
</ul>

我什至想将 onclick 附加到 Open li 上，它会启动文件打开对话框，就像 input type="file" 那样。我可以处理将代码附加到 li 的 onclick 事件，但我不知道要附加什么代码。

TIA

Answer 1

您可以向页面添加一个普通的 input type="file" 并将其设置为隐藏。像这样:

<input type="file" id="theFileInput" style="display:none;" />

(在此示例中仅使用内联样式，我当然建议将样式与标记分开。)

然后您可以发起对其的点击以响应目标元素上的点击事件。使用 jQuery(假设您可以在 li 上设置一个 id，或者以某种方式在选择器中唯一地标识它)它会是这样的:

$('#clickableLiElement').click(function() {
    $('#theFileInput').click();
});

input type="file" 仍然存在，并且可以像任何其他表单元素一样进行交互。它只是对用户不可见。但这会启动“打开文件”对话框并将其值设置为正常的元素，这可以正常包含在发送到服务器的 POST 中。