如何以编程方式打开Firefox中的文件对话框 [英] How to open programmatically the file dialog box in Firefox

问题描述

当用户按下键时，我想以编程方式打开文件对话框。
我已经在这些答案中获得了一些解决方案，但没有一个似乎适用于Firefox。

我的小提琴在这里 ：只需按空格键打开文件选择器（点击结果部分后）

As您可以看到我已经尝试了一些功能来模拟点击：'eventFire'（或更简单地 el.click（）; ）适用于除FF外的所有浏览器，但'simulateClick' 来自MDN 不适用于FF（？）

  var event = new MouseEvent（'click'，{
'view'：window，
'bubbles'：true，
'cancelable' true 
}）; 
 el.dispatchEvent（event）; 
  

可能是因为 el 是一个输入？

如何在FF中实现？

解决方案

这个用例是现代浏览器的安全限制。他们肯定将人为起始事件与人为事件区分开来，并且在涉及到任何欺骗性的关注点时对它们进行不同的对待。浏览器观看和评估的事件链可能相当复杂，所以翻译真正的点击事件和代理他们的工作（用户真的点击了一些东西，所以它可以意味着他打算做一些动作），但代理键盘或其他事件点击是潜在的危险，因此被阻止。有这个简单的文件（你可以把它粘贴到URL中）：

  data：text / html，
< input id =ftype =fileonclick =console.log（this，'click'）onfocus =console.log（this，'focus'）> 
< p> 
< button onclick =f.focus（）> focus ^< / button> 
< button onclick =f.click（）>点击^< / button> 
< script style =display：block> 
 console.log（f）; 
 f.focus（）; 
 f.click（）; 
< / script> 
  

如果触发 f.click（）通过点击按钮，它可以工作。如果您通过控制台触发它， onclick 被触发，但不是默认动作（没有打开文件选择器）。适用于Chrome和Firefox。它不是这样，你会看到文件选择器在页面加载打开。

如果你尝试类似的实验在复选框更改为后，/developer.mozilla.org/samples/domref/dispatchEvent.htmlrel =nofollow> MDN示例 code> file 并从控制台调用 simulateClick（），您将得到相同的结果（在Chrome和Firefox中） / p>

对我来说，似乎有点神秘的事实是，你的小提琴可以在Chrome中使用，尽管我希望它不会。

I want to open the file dialog box programmatically when the user press a key. I have grabbed some solutions in thess answers but none of them seems to work with Firefox.

My fiddle is here : simply press the Spacebar to open the file picker (after 1 click on the 'Result' section)

As you can see I have tried some functions to simulate click : 'eventFire' (or more simply el.click();) works with all browsers except FF, but 'simulateClick' wich comes from MDN doesn't work with FF (?)

  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  el.dispatchEvent(event);

May be is it due to the fact that el is an input ?

How can I achieve this in FF ?

解决方案

This use case is hitting security restrictions of modern browsers. They surely distinguish "human initiated" events from "artificial" ones and treats them differently when it comes to any spoofing concern. The event chain that browser watches and evaluates can be quite complex, so translating "real" click events and 'proxying' them works (user really clicked something, so it can mean that he intended to make some action), but proxying keyboard or other events to click is potentially dangerous and thus blocked. Have this simple document (you can copypaste it into URL):

data:text/html,
<input id="f" type="file" onclick="console.log(this,'click')" onfocus="console.log(this,'focus')">
<p>
<button onclick="f.focus()">focus ^</button>
<button onclick="f.click()">click ^</button>
<script style="display:block">
console.log(f);
f.focus();
f.click();
</script>

If you trigger f.click() by clicking the button, it works. If you trigger it via console, onclick is fired but not the default action (no file picker is opened). Applies both for Chrome and Firefox. It it wasn't that way, you'd see file picker opened on the page load.

If you try similar experiment at the MDN example after you change the input's type from checkbox to file and invoke simulateClick() from console, you'll get the same outcome (both in Chrome and Firefox).

What seems like a bit of mystery to me is fact that your fiddle works in Chrome, although I'd expect it not to.

这篇关于如何以编程方式打开Firefox中的文件对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！