（YUI 上传器）监听器不触发事件答案

【问题标题】：(YUI uploader) listeners not fiering events（YUI 上传器）监听器不触发事件
【发布时间】：2009-11-21 14:29:21
【问题描述】：

我正在尝试使用 YUI 上传器，但是当我单击浏览按钮时无法打开文件对话框窗口。我正在关注（或多或少）example on Yahoos demo。

这是我的 HTML 代码：

<div id="fileProgress">
  <input id="fileName" type="text" size="40" />
  <input id="uploaderUI" name="uploaderUI" class="submitButton" type="button" value="Browse" />
  <input id="uploadFile" name="uploadFile" class="submitButton" type="button" value="Upload" />
    <div id="progressBar"></div>
</div>

这是我的 javasctips 代码：

jQuery(document).ready(function() {
    initYUIUpload();
});

  function initYUIUpload()
  {
    YAHOO.widget.Uploader.SWFURL = "wp-includes/js/yui/assets/uploader.swf";  
    var uploader = new YAHOO.widget.Uploader("uploaderUI");

    uploader.addListener('contentReady', handleContentReady);
    uploader.addListener('fileSelect',onFileSelect)
    uploader.addListener('uploadStart',onUploadStart);
    uploader.addListener('uploadProgress',onUploadProgress);
    uploader.addListener('uploadCancel',onUploadCancel);
    uploader.addListener('uploadComplete',onUploadComplete);
    uploader.addListener('uploadCompleteData',onUploadResponse);
    uploader.addListener('uploadError', onUploadError);

    jQuery('#uploadFile').click(function(){ upload() });            
  }

更新
我“放弃”了使用 YUI 上传器，现在正在使用 Uploadify。

【问题讨论】：

标签： php javascript jquery yui yui-uploader

【解决方案1】：

我也遇到了同样的问题。

2.8版本的uploader.swf有一个bug

如果你和我有同样的问题，那么切换到 2.7 版本的 uploader.swf 会让你的事件按预期触发。

【讨论】：

【解决方案2】：

我认为这可能与来自 YUI 上传者页面的这条注释有关：

由于即将推出的 Flash Player 10 中的安全性更改，调用“浏览”对话框的 UI 必须包含在 Flash 播放器中。正因为如此，这个新版本的 Uploader 不向后兼容为与以前版本一起工作而编写的代码（但是，它与 Flash Player 9 兼容）。在未仔细阅读文档和查看新示例之前不要升级到此版本。

这意味着您不必直接从<input> 按钮调用您的上传函数，而是必须创建另一个<div>，其中将包含由YUI 上传器创建的透明Flash 叠加层。

See the example from the YUI site：

 <div id="uiElements" style="display:inline;">
        <div id="uploaderContainer">
            <div id="uploaderOverlay" style="position:absolute; z-index:2"></div>
            <div id="selectFilesLink" style="z-index:1"><a id="selectLink" href="#">Select Files</a></div>
        </div>
        <div id="uploadFilesLink"><a id="uploadLink" onClick="upload(); return false;" href="#">Upload Files</a></div>
</div>

<script type="text/javascript">

 YAHOO.util.Event.onDOMReady(function () { 
    var uiLayer = YAHOO.util.Dom.getRegion('selectLink');
    var overlay = YAHOO.util.Dom.get('uploaderOverlay');
    YAHOO.util.Dom.setStyle(overlay, 'width', uiLayer.right-uiLayer.left + "px");
    YAHOO.util.Dom.setStyle(overlay, 'height', uiLayer.bottom-uiLayer.top + "px");
    });

</script>

【讨论】：

【解决方案3】：

正常情况下，当担心是关于 swf 文件时，原因是这个文件打开对话框而不是 JAVASCRIPT，所以你必须下载文件并放入你无法直接在雅虎网站访问的服务器。

你也可以使用这个依赖

最好的那鸿书

附言。我第一次使用 yui upload 时遇到了同样的问题。

【讨论】：