plupload - 上传按钮仅在以编程方式触发click时才有效

Question

我使用的是plupload 1.5.7。我在页面上有两个按钮：

第一个（添加新附件）在plupload配置中用作browse_button。当我点击它时，它不起作用。执行Click事件，但未打开文件浏览器。但是有第二个按钮（触发器添加新的附件点击），它只执行此操作：

$('#TriggerAddNewAttachmentClickButton').click(function() {
    $("#AddNewAttachmentButton").click();
})

因此它只会触发第一个按钮的点击。它工作正常。单击它可打开文件浏览器。

这怎么可能？这种行为在Firefox，Chrome和Internet Explorer之间保持一致。

显然这与安全性有关，因为plupload使用技巧来隐藏输入，但第二种方法并不安全。我不能在jsfiddle中重现这个问题，它只存在于特定的上下文中，但也许有人会发生类似的行为。

Answer 1

我在plupload遇到了类似的问题。我花了几个小时研究这个问题，最后我找到了原因。正如@jbl所说：

  

我想我记得当在plupload初始化时看不到容器时我遇到了这种问题。这可能是同样的问题吗？

plupload的工作方式如下：

还记得您需要设置browse_button吗？实际上，plupload会为每个browse_button创建输入[type =＆＃34;文件＆＃34;] 。在正常情况下，输入[type =＆＃34; file＆＃34;] 的大小和位置将与browse_button完全相同。因此，当您点击browse_button时，按钮不会触发文件选择器对话框弹出，它是输入[type =＆＃34; file＆＃34;] < / strong>即可。

但是，如果您将browse_button容器设置为：display:none（我们说，无效），那么即使您回退display:block（我们说，活跃），输入[type =＆＃34; file＆＃34;] 的父容器的宽度和高度将为零时间。

我对此问题的快速解决方案如下：

在将容器状态从非活动更改为活动时，我会衡量browse_button的位置和大小。然后我会手动将位置和大小设置为隐藏的输入[type =＆＃34; file＆＃34;] ;

以下是一些示例代码：

var $btn = $currPanel.find(".browse_button");
var w = $btn.outerWidth();
var h = $btn.outerHeight();
var position = $btn.position();
var $hiddenInputDiv = $currPanel.find(".moxie-shim");
$hiddenInputDiv.height(h);
$hiddenInputDiv.width(w);
$hiddenInputDiv.css(
{
    top: $btn.css("margin-top"),
    left: position.left
});