Question

我需要创建一个隐藏的输入[type = file]字段和一个button元素。单击该按钮时，会将事件委派给文件输入，以便打开文件对话框。在现代的布鲁塞尔，这不是一个问题。

document.getElementById('readFile').onclick = function(){
            var event = document.createEvent("MouseEvent");
            event.initMouseEvent("click", false, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
            filesInput.dispatchEvent(event) ;
}

或只是filesInput.click()
其中filesInput引用输入[type = file]而#readFile是一个按钮。

但是由于某种原因，这在Firefox 3.6中不起作用，我的规范要求浏览器支持Firefox＆gt; = 3.6 有没有办法在Firefox 3.6中伪造鼠标点击事件，或者我只需要显示丑陋的默认输入？

我没有使用JQuery或任何其他框架。

Answer 1

您尝试做的最简单的解决方案是：

在this answer中，我解释了如何以最简单的方式做到这一点：

<强> HTML：

<label>
    <input type="file">
    My Label
</label>

<强> CSS：

label input[type="file"] {
    position: fixed;
    top: -1000px;
}

Demo

这是最简单的解决方案，即使在旧版浏览器中也能正常运行。请参阅my full answer以获取更多信息，并进一步解释为何效果最佳。

现在，这在Firefox 3.6中不起作用，因此对于FF3.6，您可以使用基于these CSS tricks的回退机制：

其他CSS：

label input[type="file"], body:-moz-any-link  {
    position: static;
}
:-moz-any(html) label input[type="file"] {
    position: fixed;
}

这样，对于所有Firefox浏览器，您将首先将输入的位置更改回static，但对于支持:-moz-any()（FF4 +）的版本，您将其再次更改为{{1 }}。这样，您将为文件输入提供功能标签，并为版本1-4提供后备。

旧浏览器中的假onclick事件

1 个答案: