我已经看过几个类似的帖子,其解决方案似乎对这些人有效,但我无法让它发挥作用。
我在我的项目中使用http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/。它在所有浏览器中都可以正常工作,但在Safari中,“浏览”按钮不会打开文件对话框。 script.js中存在以下代码(包含在插件中):
$('#drop a').click(function(){
// Simulate a click on the file input button
// to show the file browser dialog
$(this).parent().find('input').click();
});
.click()不会在Safari中触发。我按照jQuery .click() works on every browser but Safari尝试了解决方案并实施了
$('#drop a').click(function(){
var a = $(this).parent().find('input');
var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);
a.dispatchEvent(evObj);
});
但后来我收到dispatchEvent is not a function
的错误。然后我对此做了一些研究,并尝试了jQuery.noConflict()路由,但这并没有解决错误。另外,我在主文件中使用了很多jQuery,并且我无法为整个页面激活noConflict()模式。也没有理由jQuery应该与任何东西发生冲突,因为我只使用jQuery和普通的javascript而且我没有使用像prototype或angular这样的东西。有人知道在Safari中模拟点击的另一种方法吗?
更新:仅供参考,我在上述功能中添加了alert('test')
(单击“浏览”时会触发),我确实在Safari中收到了提醒,但是没有模拟文件输入元素的点击,即:它没有打开文件对话框。
答案 0 :(得分:5)
我原来问题中的第二部分代码结果证明是有用的,除了两件事。
1)该方法不喜欢jQuery,因此不是
var a = $(this).parent().find('input')[0];
我为文件输入分配了一个ID,而不是名为
var a = document.getElementById('upload_select');
2)如果输入被隐藏(display:none;
),那么Safari会公然忽略这个,这就是,所以我做了输入font-size = 1px;和不透明度= 0.
实现这两项更改使代码正常运行。
答案 1 :(得分:2)
您需要更仔细地阅读that answer。 : - )
dispatchEvent
是DOM元素的函数,而不是jQuery对象。你试图在jQuery对象上调用它。所以:
$('#drop a').click(function(){
var a = $(this).parent().find('input')[0];
// Change here -----------------------^^^
var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);
a.dispatchEvent(evObj);
});
在jQuery对象上使用[0]
为jQuery对象提供第一个DOM对象,如果jQuery对象为空,则为undefined
。