输入类型=附加到 onclick 事件的文件答案

【问题标题】：input type=file attached to an onclick event输入类型=附加到 onclick 事件的文件
【发布时间】：2012-03-13 03:27:23
【问题描述】：

我有一个这样的菜单：

<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>

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

TIA

【问题讨论】：

标签： javascript html file input onclick

【解决方案1】：

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

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

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

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

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

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

【讨论】：

这对ie有效吗？（IE 不允许 javascript 强制点击输入）

【解决方案2】：

上面的答案（大卫）有效，但在你的 css 文件中你需要这样做：

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

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

【讨论】：

错了。这将在所有浏览器中隐藏它。经过测试。

【解决方案3】：

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>

【讨论】：