通过ajax(chrome）在vanillajs中以编程方式启动文件输入点击

Fire a file input click programmatically in vanilla js via ajax (chrome)

本文关键字：启动 方式 编程 文件 输入 入点 ajax chrome vanillajs 通过      更新时间：2023-09-26

我有一个webapp，其中任何按钮点击都会向服务器发送ajax请求，服务器验证并将js代码发送回客户端。我使用的框架不允许我实现jQuery（它会导致不可预测的问题）。

我的问题是，我有一个按钮，当点击时应该打开一个文件选择器。它已经在firefox和ie中工作了。为了实现这一点，我设置了一个隐藏的文件输入：

<input type="file" style="z-index: 999999999; visibility: hidden; position: absolute; top: 0px; left: 0px;">

现在，当我点击按钮时，会发生以下情况：

  1. 一个ajax请求被发送到服务器，通知它按钮被点击了。

  2. 服务器知道动态创建的html元素的ID，找到正确的ID并向客户端回答：

    dropzone_[ID].inputClick();

（[ID]是动态创建的ID，只有我的服务器才能确定）

  1. 然后，在客户端上调用方法"inputClick（）"，并对隐藏的输入字段执行单击。代码如下：

    dropzone.hiddenFileInput.focus（）；dropzone.hiddenFileInput.click（）；

  2. 最后，文件选择器出现了，我可以正确地选择文件。

让chrome这样工作似乎是一个安全问题。我已经看到很多其他人也有类似的问题，关注输入字段有帮助，但这在这里不适用。此外，firefox和ie似乎明白点击是一种合法的、通过ajax委托的点击，但chrome不这么认为。

服务器通信本身没有问题。添加到inputClick()方法的console.log()将始终在所有浏览器上激发，但单击事件不会在chrome中激发。

有人知道如何为此编写变通方法吗？

试试这个：

el = dropzone.hiddenFileInput;
if (el.onclick) {
   el.onclick();
} else if (el.click) {
   el.click();
}

某些浏览器使用onclick()。正因为如此，人们使用jQuery、Mootools等框架和库来避免跨浏览器问题。我不知道为什么你的框架不允许jQuery，因为不可预测的问题，这意味着你的框架编码错误，因为jQuery在所有浏览器中都能完美运行。

编辑

我认为你在试验chrome中的一个bug。请测试此代码：

   if (BrowserDetect.browser.indexOf("Chrome") != -1) {
         var fireOnThis = document.getElementById('element');
         var evObj = document.createEvent('MouseEvents');
         evObj.initMouseEvent( 'click', true, true, window, 0, 0, 345, 7, 220, false, false, true, false, 0, null );
         fireOnThis.dispatchEvent(evObj);
         return true;
   }
相关文章：