使用 plupload 手动触发“打开文件对话框”答案

【问题标题】：Manually trigger 'open file dialog' using plupload使用 plupload 手动触发“打开文件对话框”
【发布时间】：2011-07-08 02:38:25
【问题描述】：

在上传图片之前，我正在使用 plupload 到客户端缩放图片。如果用户没有安装 flash、silverlight 等引擎，我喜欢它优雅地回退到 html4 的功能。

我希望能够在用户单击页面上的某些元素并且我想处理事件时开始上传（有时阻止文件对话框打开）。事实上，我想使用 javascript 打开文件对话框。

好的，所以 HTML4（或者更确切地说是浏览器，除了 chrome :P）不会让我这样做，除非用户单击浏览按钮（或覆盖浏览按钮的叠加层），所以当我得到回退到 HTML4 我会接受我不能这样做，但大多数用户会安装 flash 或 silverlight，他们没有这个限制。所以我的问题是：

如何在 plupload 中触发文件打开对话框（请记住，我只需要 flash 和 silverlight 引擎来执行此操作）。

【问题讨论】：

标签： javascript plupload

【解决方案1】：

以前的解决方案不适用于 plupload 2.1.2 的 iPhone。

以下代码成功了（需要 jquery）：

$("#id_of_the_second_button").click(function() { 
    $('div.moxie-shim input[type=file]').trigger('click');
});

【讨论】：

使用 plupload() 也为我工作 not pluploadQueue() 这是我的问题并链接到 @estornes 答案:)

【解决方案2】：

随着时间的推移，后备运行时将变得无关紧要。这意味着迟早我们都会使用 HTML5 运行时。如果您使用的是 HTML5 运行时，但不使用 pluploadQueue()，这也可以：

// Set up and initialise uploader
var uploader = new plupload.Uploader({
  'runtimes' : 'html5',
  'browse_button' : 'id_of_the_first_button'

  // Other options
});

uploader.init();

// Hook in the second button
plupload.addEvent(document.getElementById('id_of_the_second_button'), 'click', function(e) {
  var input = document.getElementById(uploader.id + '_html5');
  if (input && !input.disabled) {
    input.click();
  } // if
  e.preventDefault();
});

【讨论】：

找到了一些对此的引用和 pluploadQueue...plupload.com/punbb/viewtopic.php?pid=6879#p6879
非常好。正是我需要的

【解决方案3】：

如果有人在搜索 HTML5 解决方案，这里是：

var up= $('#uploader').pluploadQueue();
if (up.features.triggerDialog) {
    plupload.addEvent(document.getElementById('idOtherButton'), 'click', function(e) {
        var input = document.getElementById(up.id + '_html5');
        if (input && !input.disabled) { // for some reason FF (up to 8.0.1 so far) lets to click disabled input[type=file]
            input.click();
        }
        e.preventDefault();
    }); 
}

【讨论】：

是的，HTML5 是现代浏览器的必经之路（Flash、Silverlight 和 HTML4 只是后备运行时）。由于我没有使用pluploadQueue()，因此我使用plupload.Uploader 实例来获取输入的ID，并触发点击甚至获取“选择文件”对话框（答案如下）。

【解决方案4】：

好的。似乎不可能做到这一点，所以除非有人为 silverlight 和 flash 组件实现事件句柄，否则我不走运

【讨论】：

实际上 Flash 和 Silverlight 不会让您以编程方式触发文件对话框。它只允许作为对鼠标点击等事件的反应发生 (help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/…)。
@jayarjo - 文档声明该方法抛出“错误 - 如果未调用该方法以响应用户操作，例如鼠标事件或按键事件。”它没有说明鼠标事件或按键是否必须在 Flash 控件内。有谁知道是否可以通过按下外部按钮触发上传？

【解决方案5】：

我读到了你的问题。

我发现一些文章可能有助于解决这个问题。检查他们。它可能会有所帮助...！

01. https://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input-e

02. https://stackoverflow.com/questions/2048026/open-file-dialog-box-in-javascript

【讨论】：

您的两个解决方案都与 javascript/html4 有关，但实际上都不适用于我需要的情况。我知道我的问题非常具体，但我只需要在 pluploads silverlight 和 flash 引擎中使用此功能，而不是在 html4 中

【解决方案6】：

@Per Hornshøj-Schierbeck 上传器初始化后。渲染输入文件以选择需要一些时间。所以你需要像下面这样等待：

this.uploader.init();
var task = new Ext.util.DelayedTask(function () {
    var inputArray = $('div.moxie-shim input[type=file]');
    var input = inputArray.length > 1 ? inputArray[inputArray.length - 1] : 
                inputArray[0];
    $(input).trigger('click');
 });

task.delay(100);

javascript 中的代码类似。使用 plupload 2.3.6 为我工作

求助！

【讨论】：