input-type=附加到onclick事件的文件

input type=file attached to an onclick event

本文关键字：事件 文件 onclick input-type      更新时间：2023-09-26

我有一个这样的菜单：

<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

您可以向页面添加一个普通的input type="file"，并将其设置为隐藏样式。类似这样的东西：

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

（对于这个例子，我只建议使用内联样式，当然，我建议将样式与标记分离。）

然后，您可以启动对它的单击，以响应目标元素上的单击事件。使用jQuery（假设您可以在li上设置id，或者以某种方式在选择器中唯一标识它），它将类似于：

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

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

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>

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

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

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

相关文章：