输入类型=附加到 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;" />

本示例仅使用内联样式，当然我建议将样式与标记分开。）

然后您可以启动对其的单击以响应目标元素上的单击事件。 它会类似于：

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

使用 jQuery（假设您可以在 li 上设置 id，或者以某种方式在选择器中唯一标识它） ， type="file" 仍然存在，并且可以像任何其他表单元素一样进行交互。它对用户来说只是不可见的。但这将启动“打开文件”对话框并正常将其值设置为该元素，该元素可以正常包含在到服务器的 POST 中。

Answer 2

With JavaScript 

<input type="file" accept="images/*" name="images" id="images" onClick="showModal()" style="display:none"/>
<script>
    function showModal(){
        document.getElementById('images').click();
    }
</script>
<li onClick="showModal()"></li>

Answer 3

上面的答案（David）有效，但在您的 css 文件中，您需要执行以下操作：

opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);

display:none 解决方案不适用于 Chrome 或 Safari。