在JavaScript中，我可以让一个“点击”事件火的文件输入元素编程?

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

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

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

当前回答

有一些方法可以将事件重定向到控件，但不要期望能够轻松地将事件发送到自己的消防控件，因为浏览器会出于(良好的)安全原因试图阻止它。

如果您只需要在用户单击某些内容时显示文件对话框，比如因为您想要更好看的文件上传按钮，那么您可能想要看看Shaun Inman想出的方法。

我已经能够通过在按下键、按下键和按上键事件之间创造性地转移焦点来实现键盘触发。YMMV。

我真诚的建议是不要去管它，因为这是一个浏览器不兼容的痛苦世界。轻微的浏览器更新也可能会在没有警告的情况下阻止一些技巧，你可能不得不不断地重新发明一些技巧来保持它的工作。

2008-10-17 01:30:24

其他回答

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

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

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

2009-04-29 17:21:51

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

2011-02-10 21:35:23

这并非不可能:

var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);  
setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);

但它只有在通过click-event调用的函数中才能工作。

所以你可能有以下设置:

html:

<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div>
<input type="file" id="input_img">

JavaScript:

    function openFileChooser() {
      var evObj = document.createEvent('MouseEvents');
      evObj.initMouseEvent('click', true, true, window);  
      setTimeout(function()
      { 
        document.getElementById('input_img').dispatchEvent(evObj);      
      },100);      
    }

2015-10-03 00:28:56

JS fiddle.net/eyedean/1bw357kw/

popFileSelector = function() { var el = document.getElementById("fileElem"); if (el) { el.click(); } }; window.popRightAway = function() { document.getElementById('log').innerHTML += 'I am right away!<br />'; popFileSelector(); }; window.popWithDelay = function() { document.getElementById('log').innerHTML += 'I am gonna delay!<br />'; window.setTimeout(function() { document.getElementById('log').innerHTML += 'I was delayed!<br />'; popFileSelector(); }, 1000); }; <body> <form> <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)" /> </form> <a onclick="popRightAway()" href="#">Pop Now</a> <br /> <a onclick="popWithDelay()" href="#">Pop With 1 Second Delay</a> <div id="log">Log: <br /></div> </body>

2014-10-31 18:35:44

您可以在任何浏览器上触发click()，但有些浏览器需要元素是可见和聚焦的。下面是一个jQuery示例:

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

它与click()之前的隐藏一起工作，但我不知道它是否在不调用show方法的情况下工作。从来没有在Opera上尝试过，我在IE/FF/Safari/Chrome上测试过，它是有效的。我希望这能有所帮助。

2011-07-31 10:11:18

在JavaScript中，我可以让一个“点击”事件火的文件输入元素编程?

推荐文章

最新文章

标签