0

YUI Uploader をテストするために、非常に単純なプロトタイプをセットアップしました。(フラッシュ バージョン) ファイルは、単純な 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;
}

ここで何が間違っていますか？

4

2 に答える 2

0

おそらく「同じドメイン ポリシー」の問題があります。アップロードのターゲットは、swfuploader.swf のソースと同じである必要があります。

アップロード ターゲットはポート 28107 を使用します。あなたのページと swfuploader.swf は、同じポートまたはデフォルトの http ポートから提供されていますか? そうでない場合は、それらが存在することを確認するか、サーバーに crossdomain.xml ファイルを配置する必要があります。書き方の注意点はhttp://yuilibrary.com/yui/docs/uploader/を参照してください。

また、swfuploader URL にランダムなパラメーターを追加することで修正できる IE の Flash バグに関するコメントにも注意してください。

[編集:] サーバーであなたのファイルをテストしましたが、完全に問題ないように見えますが、ここでも失敗します。uploadstart イベントでさえ、ランダムなタイミングでは発生しません。YUI 3.5.1 のバグのようです。

回避策は、uploader-deprecated を使用して 3.4.1 アップローダを使用することです。私はこのバージョンをテストしましたが、動作します:

<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を参照してください。

于 2012-05-17T11:10:23.020 に答える
0

変化する

<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' });
});
于 2012-06-13T18:40:00.400 に答える