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

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

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

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

当前回答

这个代码适用于我。这就是你想做的吗?

<input type="file" style="position:absolute;left:-999px;" id="fileinput" />
<button  id="addfiles" >Add files</button>

<script language="javascript" type="text/javascript">
   $("#addfiles").click(function(){
      $("#fileinput").click();
   });
</script>

2011-09-10 18:34:39

其他回答

要做到这一点，你可以点击文件输入上的一个不可见的传递元素:

function simulateFileClick() {
  const div = document.createElement("div")
  div.style.visibility = "hidden"
  div.style.position = "absolute"
  div.style.width = "100%"
  div.style.height = "100%"
  div.style.pointerEvents = "none"
  const fileInput = document.getElementById("fileInput") // or whatever selector you like
  fileInput.style.position = "relative"
  fileInput.appendChild(div)
  const mouseEvent = new MouseEvent("click")
  div.dispatchEvent(mouseEvent)
}

2021-07-23 09:21:02

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

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

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

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

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

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

2014-07-30 02:20:36

我的解决方案Safari与jQuery和jQuery-ui:

$("<input type='file' class='ui-helper-hidden-accessible' />").appendTo("body").focus().trigger('click');

2012-03-07 17:42:10

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

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

2011-02-10 21:35:23

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

推荐文章

最新文章

标签