javascript - plupload - 上传按钮只有在以编程方式触发点击时才有效

Question

我正在使用 plupload 1.5.7。我在页面上有两个按钮:

第一个(添加新附件)在 plupload 配置中用作 browse_button。当我点击它时，它不起作用。单击事件已执行，但文件浏览器未打开。但是有第二个按钮(触发添加新附件点击)，它只做这个:

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

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

这怎么可能？此行为在 Firefox、Chrome 和 Internet Explorer 之间是一致的。

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

Answer 1

我在 plupload 中遇到了类似的问题。我深入研究了这个问题几个小时，终于找到了原因。正如@jbl 所说:

I guess I remember I had this kind of problem when the container was not visible upon plupload initialization. Could it be the same problem ?

plupload的工作方式如下:

还记得你需要设置一个browse_button吗？实际上，plupload 将为每个 browse_button 创建一个 input[type="file"]。在正常情况下，input[type="file"] 的大小和位置将与browse_button 完全相同。因此，当您单击 browse_button 时，触发弹出文件选择器对话框的不是按钮，而是 input[type="file"]。

但是当你设置 browse_button 容器时:display:none(我们说，inactive)，然后你甚至设置返回 display:block(我们说，active)，input[type="file"] 的父级的宽度和高度容器有时会为零。

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

当容器的状态从inactive 更改为active 时，我会测量browse_button 的位置和大小。然后我会手动设置位置和大小到隐藏的input[type="file"];

下面是一些示例代码:

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