Question

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

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

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

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

向服务器发送ajax请求，通知它该按钮已被点击。
服务器知道动态创建的html元素的ID，找到正确的ID并将其回复给客户端：

dropzone_[ID].inputClick();

（[ID]是动态创建的ID，只有我的服务器才知道）

然后，方法＆＃34; inputClick（）＆＃34;在客户端上调用并执行隐藏输入字段的单击。代码如下所示：

dropzone.hiddenFileInput.focus（）; dropzone.hiddenFileInput.click（）;
最后显示文件选择器，我可以正确选择文件。

Chrome中的安全问题似乎是这样的。而且我已经看到很多其他有类似问题的人在关注输入字段时有所帮助，但这并不适用于此。另外firefox和ie似乎明白点击是合法的，委托点击通过ajax，但铬没有。

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

有谁知道如何为此编写解决方法？

Answer 1

试试这个：

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

有些浏览器使用onclick()。因为这个人使用框架和库作为jQuery，Mootools等，以避免交叉浏览器问题。我不知道为什么你的框架不允许使用jQuery，因为不可预测的问题，这意味着你的框架编码错误，因为jQuery在所有浏览器中运行完美。

修改

我认为您正在试验Chrome中的错误。请测试此代码：

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

通过ajax（chrome）在vanilla js中以编程方式触发文件输入

1 个答案:

修改