YUI 3 UploaderFlashが「アップロード」イベントを起動しない

私は非常に簡単なプロトタイプをセットアップして、YUI Uploaderをテストしました。（フラッシュ版）ファイルは単純なAjaxレスポンスを送信しているサーバに送信しています。ただし、トリガーされるイベントはfileselectとuploadstartです。 uploadcomplete,uploaderror、およびuploadprogressはトリガーされません。これはYUI 3.5.1です。YUI 3 UploaderFlashが「アップロード」イベントを起動しない

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

は、私がここで間違って何をしているのですか？

出典

2012-05-09 Craig M

することは混乱を招く万が一JSONを返していましたフラッシュアップロード？私は[ここ]（http://stackoverflow.com/questions/7235631/yui3-uploader-rails-rjs）のように、 '__flash__toXML'という問題に遭遇しています。 – Arjan

変更

<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>

を参照し、代わりにuploaderオブジェクトのfileオブジェクトにイベントをサブスクライブ：

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-13 18:40:00 Korneel

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

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

IEのFlashバグについては、swfuploader URLにランダムなパラメータを追加することで修正できます。

[編集：] あなたのファイルを私のサーバーでテストしましたが、完全にOKですが、ここでも失敗します。アップロード開始イベントであっても、ランダムに発生することはありません。 YUI 3.5.1のバグと思われます。

回避策は、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-17 11:10:23

はい、同じポート上の同じhttpサーバーから提供されます。 Flashプラグインを使用すると、ファイルを選択してサーバーに送信できます。このプロセスでクライアント上でイベントを発生させるだけではありません。 –

YUI 3 UploaderFlashが「アップロード」イベントを起動しない

答えて

関連する問題