YUI 3 UploaderFlash 未触发“上传”事件答案

【问题标题】：YUI 3 UploaderFlash not firing 'upload' eventsYUI 3 UploaderFlash 未触发“上传”事件
【发布时间】：2012-05-09 18:07:31
【问题描述】：

我已经建立了一个非常简单的原型来测试 YUI 上传器。（flash 版本）该文件正在发送到发送简单 Ajax 响应的服务器。但是，唯一被触发的事件是fileselect 和uploadstart。 uploadcomplete、uploaderror 和 uploadprogress 永远不会被触发。这是 YUI 3.5.1。

HTML 和 JS

<!DOCTYPE html>
<html>
<head>
    <title>Uploader Bizness</title>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
</head>
<body>
    <div id="upload"></div>
    <div id="progress"></div>
    <script>
        'use strict';
        YUI().use('uploader', 'uploader-flash', function (Y) {
            Y.Uploader = Y.UploaderFlash;
            var uploader = new Y.Uploader({
                width: '150px',
                height: '40px',
                swfURL: '/flashuploader.swf'
            }).render('#upload');

            uploader.on('fileselect', function (G) {
                var firstFile = G.fileList[0];
                uploader.upload(firstFile, 'http://localhost:28107/home/upload', { postvar1: 'foo', postvar2: 'bar' });
            });

            uploader.on('uploadstart', function () {
                console.log('Upload started');
            });

            uploader.on('uploadcomplete', function (e) {
                console.log('Upload completed successfully', e);
            });

            uploader.on('uploaderror', function (e) {
                console.log('Upload error', e);
            });

            uploader.on('uploadprogress', function (file, bytesloaded, bytesTotal, percentLoaded, e) {
                $('#progess').html(percentLoaded);
            });
        });
    </script>
</body>
</html>

服务器端代码

public JsonResult Upload()
{
    var result = new JsonResult();
    result.Data = new {message = "great success"};
    return result;
}

我在这里做错了什么？

【问题讨论】：

返回 JSON 是否会混淆 Flash 上传？我遇到了__flash__toXML 问题，就像here 一样。

标签： flash yui3 yui-uploader

【解决方案1】：

改变

<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>

到

<script src="http://yui.yahooapis.com/3.6.0pr2/build/yui/yui-min.js"></script>

并订阅file 对象而不是uploader 对象上的事件：

uploader.on('fileselect', function (G) {
    var firstFile = G.fileList[0];
    firstFile.on('uploadstart', function (event) {
        console.log('Upload started');
        // var file = event.currentTarget;
    });
    uploader.upload(firstFile, 'http://localhost:28107/home/upload', { postvar1: 'foo', postvar2: 'bar' });
});

【讨论】：

【解决方案2】：

您可能有“相同的域策略”问题。上传的目标应该和swfuploader.swf的源一致

您的上传目标使用端口 28107；您的页面和 swfuploader.swf 是从同一个端口还是默认的 http 端口提供的？如果不是，您需要确保它们是或在您的服务器上放置一个 crossdomain.xml 文件。请参阅http://yuilibrary.com/yui/docs/uploader/ 以获取有关如何编写的注释。

还请注意有关 IE 中的 Flash 错误的备注，您可以通过将随机参数附加到您的 swfuploader url 来修复它。

[编辑：] 我在我的服务器上测试了你的文件，虽然它看起来很好，但在这里也失败了。即使是 uploadstart 事件也不会随机触发。似乎是 YUI 3.5.1 中的一个错误。

解决方法是使用 3.4.1 的上传器，不推荐使用 uploader-deprecated。我测试了这个版本，它可以工作：

<script>
'use strict';
YUI().use('uploader-deprecated', function (Y) {

    var uploader = new Y.Uploader({
        boundingBox: '#upload', // use boundingBox attribute instead of render('uploader')
        // width: '150px', set width & height using css 
        // height: '40px',
        swfURL: 'ENTER_PATH/uploader.swf',
        simLimit: 2
    }); // no .render('upload') !

    uploader.on('fileselect', function (G) {
        // var firstFile = G.fileList[0];
        // uploader.upload(firstFile, 'http://localhost:28107/home/upload', { postvar1: 'foo', postvar2: 'bar' });
        uploader.upload('file0', 'http://localhost:28107/stackupload.php', 'POST', { });
    });

    uploader.on('uploadstart', function () {
        console.log('Upload started');
    });

    uploader.on('uploadcomplete', function (e) {
        console.log('Upload completed successfully', e);
    });

    uploader.on('uploaderror', function (e) {
        console.log('Upload error', e);
    });
 /* not tested see below 
    uploader.on('uploadprogress', function (file, bytesloaded, bytesTotal, percentLoaded, e) {
        $('#progess').html(percentLoaded);
    });
*/
});

“uploadprogress”事件的事件签名也不同。我使用的代码：

    uploader.on('uploadprogress', function(event){
        var progress = Math.round(100 * event.bytesLoaded / event.bytesTotal);
        progressBar.set("progress", progress);
    });

您还需要自己设置按钮的样式。见http://yuilibrary.com/yui/docs/uploader-deprecated/index.html

【讨论】：

是的，它由同一个端口上的同一个 http 服务器提供服务。 flash 插件允许我选择文件并将它们发送到服务器。它只是在进程中没有在客户端上触发事件。