Question

我试图在点击另一个按钮时触发输入类型=“文件”上的点击事件。

它在所有浏览器中都运行良好，除了在Mac，Ipad和iPad中的safari浏览器。 iphone。

有没有办法完成这项任务？

Answer 1

您可以使用以下代码在所有浏览器中成功运行，而不是trigger("click")：

var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true); 
document.getElementById(elem_id).dispatchEvent(evt);

Answer 2

找到另一种选择。

只需将输入type="file"放在自定义按钮上，然后通过绝对定位，并使用jQuery fadeTo('fast',0)隐藏它。

现在，如果我们点击自定义按钮文件，则会出现浏览器窗口。

它适用于所有桌面浏览器，但不适用于iPhone＆amp; iPad，因为他们不允许上传任何文件。

Answer 3

使元素可见，因为触发事件对mac safari中的隐藏元素无效。

Answer 4

出于安全原因，浏览器在与文件输入的JavaScript交互方面可能非常挑剔。 Safari阻止您触发任何点击事件。某些版本的Chrome和Firefox也有此限制。这是previously discussed here。

Answer 5

最好使用CSS而不是JS来隐藏元素，因为它会直接隐藏元素。

Answer 6

以下方法对我有用：

$(".upload_on_click").each(function(index) {
    var form = $(this).next("form");
    //form.hide(); /* THIS TECHNIQUE DIDN'T WORK IN SAFARI */
    form.css("position", "absolute");
    form.css("visibility", "hidden");
    $(this).css("cursor", "pointer");
    $(this).click(function() {
        $('input[type="file"]', form).trigger("click");
    });
    $('input[type="file"]', form).change(function() {
        $('input[type="submit"]', form).trigger("click");
    });
});

Answer 7

不确定是否有人正在阅读这个问题，但我最近遇到了与Safari类似的问题，所以我想我会分享。

首先，正如ceejayoz所提到的，请参阅此处的讨论：In JavaScript can I make a "click" event fire programmatically for a file input element?

然后，如果您不想使用按钮定位，则解决方案是显示文件输入按钮（删除“display：none;”），然后使用“opacity：0;”隐藏它。您可能还希望绝对定位它，以便它不与其他元素交互。无论如何，这样你仍然可以使用JS在所有浏览器中激活文件输入。

Answer 8

Safari中不支持

.click（）。 Sattu的建议应该有效。但是您不需要Javascript来自定义输入文件按钮。

<label><input type="file" id="file" name="file" style="position:absolute; left:-9999px;" />Upload</label>

参考：http://noypiscripter.blogspot.com/2014/04/simplest-cross-browser-custom-upload.html

Answer 9

我得到了最简单的答案

输入文件元素

opacity : 0.01

Answer 10

只需删除“display：none”，然后使用“visibility：hidden”并跨浏览器工作。

Answer 11

尝试在页脚中加载脚本。我有几次类似的问题，这就是诀窍。

Jquery触发器点击不适用于mac，Ipad和amp;中的safari浏览器苹果手机

11 个答案: