在JavaScript中,我可以以编程方式为文件输入元素触发"click"事件吗？

我想以编程方式在标记上触发click事件.

只是调用click()似乎没有做任何事情,或者至少它没有弹出文件选择对话框.

我一直在尝试使用侦听器捕获事件并重定向事件,但是我无法像点击某个人那样实际执行事件.

1> 小智..：

---

我一直在寻找解决方案.这些是我做出的结论:

出于安全原因,Opera和Firefox不允许触发文件输入.

唯一方便的选择是创建一个"隐藏"文件输入(使用不透明度,而不是"隐藏"或"显示:无"!),然后创建"下方"按钮.通过这种方式可以看到按钮,但在用户单击时,它实际上会激活文件输入.

希望这可以帮助!:)

Upload File

---

这个解决方案效果很好 不知道为什么它被忽视和没有升级.这不是问题所要求的,但这是一个很好的工作.您是否发现它与任何浏览器不兼容？我没有时间通过​​所有10种以上的相关版本进行测试.

2> Jason Buntin..：

---

你不能在所有的浏览器中做到这一点,据说IE 确实允许它,但Mozilla和Opera没有.

当您在GMail中撰写邮件时,"附加文件"功能以一种方式实现,适用于IE和支持此功能的任何浏览器,然后为Firefox和那些不支持的浏览器实现另一种方式.

我不知道为什么你不能这样做,但有一点是安全风险,并且你不允许在任何浏览器中做,有一点是在HTML File元素上以编程方式设置文件名.

---

澄清上面的评论:Chrome最近更改为检查文件`input`元素是否可见.如果可以看到元素,则触发"click"方法,包括在控制台中.

3> 小智..：

---

您可以在任何浏览器上触发click(),但某些浏览器需要该元素可见且集中.这是一个jQuery示例:

$('#input_element').show();
$('#input_element').focus();
$('#input_element').click();
$('#input_element').hide();

它适用于之前的hide,click()但我不知道它是否有效而不调用show方法.从来没有在Opera上试过这个,我在IE/FF/Safari/Chrome上测试过它的确有效.我希望这将有所帮助.

---

感谢分享.万一你不知道 - 你可以在jQuery中使用链接:`$(...).show().focus().click().hide();`:)

4> 小智..：

---

这是可能的:在FF4 +,Opera？,Chrome:但是:

inputElement.click()应该从用户操作上下文调用!(不是脚本执行上下文)

应该是可见的(inputElement.style.display !== 'none')(你可以隐藏它与可见性或其他东西,但不是"显示"属性)

---

顺便说一句,任何人都有关于"用户操作上下文"与"脚本执行上下文"的任何进一步资源吗？我在搜索时看到的一切都与执行上下文和"this"有关.:/

5> McTrafik..：

---

对于那些了解你必须在链接上覆盖一个不可见形式但又懒得写的人,我为你写了.好吧,对我而言,不妨分享一下.欢迎评论.

HTML(某处):

File Browse

HTML(你不关心的地方):

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();
}

6> Vitaly Fadee..：

---

试试这个解决方案:http://code.google.com/p/upload-at-click/

7> 小智..：

---

如果您希望该click方法适用于Chrome,Firefox等,请将以下样式应用于输入文件.它将完全隐藏,就像你做的那样display: none;

#fileInput {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -5000px;
}

就这么简单,我测试了它的工作原理!

8> challet..：

---

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