附加到onclick事件的输入类型为file。

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事件，以启动类似于的文件打开对话框。我可以处理将代码附加到li元素的onclick事件上，但我不知道要附加什么代码。

谢谢您！

- davej

Answer 1

您可以在页面上添加一个普通的input type="file"，并将其样式设置为隐藏。就像这样：

：

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

（仅用于此示例中的内联样式，建议将样式与标记分离。）

然后，您可以在响应目标元素上的单击事件时启动对其的单击。 使用jQuery（假设您可以在

上设置id，或以某种方式在选择器中唯一地标识它），代码如下：

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

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

- David

---

这个在IE上能用吗？（在IE浏览器中，不能通过JavaScript来实现对输入框的强制点击） - Jonathan DS

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>

- Manuelvalles

Answer 3

上面的答案（David）是可行的，但在你的CSS文件中需要这样做：

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

display:none 的解决方案在 Chrome 或 Safari 上不起作用。

- horndash

---

错误的。这会在所有浏览器中隐藏它。已测试。 - Andrei Surdu