我想通过编程方式在<input type="file">标记上生成一个点击事件。

仅仅调用click()似乎没有做任何事情,或者至少它不会弹出一个文件选择对话框。

我一直在尝试使用侦听器捕获事件并重定向事件,但我还不能像某人点击它那样实际执行事件。


当前回答

我发现如果输入(文件)是外部形式,那么触发单击事件调用文件对话框。

其他回答

这将在Firefox 4中实现,但需要注意的是,它被视为一个弹出窗口,因此无论何时弹出窗口都将被阻止。

我知道这很老了,所有这些解决方案都是针对浏览器安全预防措施的黑客,具有真正的价值。

也就是说,到今天为止,fileInput.click()可以在当前的Chrome (36.0.1985.125 m)和当前的Firefox ESR(24.7.0)中工作,但不能在当前的IE(11.0.9600.17207)中工作。在一个按钮的顶部覆盖一个不透明度为0的文件字段是可行的,但是我想要一个链接元素作为可见的触发器,并且悬停下划线在任何浏览器中都不太适用。它闪烁着然后消失了,可能是浏览器在考虑是否实际应用悬浮样式。

但我确实找到了一个在所有这些浏览器中都能工作的解决方案。我不会说我测试过所有浏览器的每个版本,也不会说我知道它会一直工作下去,但它现在似乎满足了我的需求。

这很简单:将文件输入字段定位到屏幕外(Position: absolute;顶部:-5000px),在它周围放一个标签元素,并触发标签上的点击,而不是文件字段本身。

请注意,链接需要编写脚本来调用标签的click方法,它不会自动完成,就像单击标签元素中的文本一样。显然,link元素捕获了点击,而没有传递到标签。

还要注意,这并没有提供显示当前所选文件的方法,因为该字段是屏幕外的。我想在文件被选中时立即提交,所以这对我来说不是问题,但如果您的情况不同,您将需要某种不同的方法。

只需使用标签标记,这样就可以隐藏输入,并使其通过相关标签工作 https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label

对于那些知道你必须在链接上覆盖一个看不见的表单,但懒得写的人,我为你写了它。对我来说是,但还是分享吧。欢迎提出意见。

HTML(某处):

<a id="fileLink" href="javascript:fileBrowse();" onmouseover="fileMove();">File Browse</a>

HTML(你不关心的地方):

<div id="uploadForm" style="filter:alpha(opacity=0); opacity: 0.0; width: 300px; cursor: pointer;">
    <form method="POST" enctype="multipart/form-data">
        <input type="file" name="file" />
    </form>
</div>

JavaScript:

function pageY(el) {
    var ot = 0;
    while (el && el.offsetParent != el) {
        ot += el.offsetTop ? el.offsetTop : 0;
        el = el.offsetParent;
    }
    return ot;
}

function pageX(el) {
    var ol = 0;
    while (el && el.offsetParent != el) {
        ol += el.offsetLeft ? el.offsetLeft : 0;
        el = el.offsetParent;
    }
    return ol;
}

function fileMove() {
    if (navigator.appName == "Microsoft Internet Explorer") {
        return; // Don't need to do this in IE. 
    }
    var link = document.getElementById("fileLink");
    var form = document.getElementById("uploadForm");
    var x = pageX(link);
    var y = pageY(link);
    form.style.position = 'absolute';
    form.style.left = x + 'px';
    form.style.top = y + 'px';
}

function fileBrowse() {
    // This works in IE only. Doesn't do jack in FF. :( 
    var browseField = document.getElementById("uploadForm").file;
    browseField.click();
}

我正在研究这个不久前,因为我想创建一个自定义按钮,将打开文件对话框,并立即开始上传。我刚刚注意到一些可能使这成为可能的事情- firefox似乎打开对话框,当你点击上传的任何地方。所以下面的方法可以做到:

创建一个文件上传和一个单独的元素,其中包含您想要用作按钮的图像 安排它们重叠,并使文件元素背景和边框透明,这样按钮是唯一可见的东西 添加javascript使IE在点击按钮/文件输入时打开对话框 当选择文件时,使用onchange事件提交表单

这只是理论上的,因为我已经用了另一种方法来解决这个问题,但它可能会起作用。