YUI 3 UploaderFlash不點火

我已經建立了一個非常簡單的原型來測試出YUI上傳「上傳」事件。（flash版本）該文件正在發送一個簡單的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 Flash上傳？我遇到了'__flash__toXML'問題，就像[here]（http://stackoverflow.com/questions/7235631/yui3-uploader-rails-rjs）。 – 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>

和訂閱事件的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-13 18:40:00 Korneel

你可能有一個「同域策略」的問題。上傳的目標應該是一樣swfuploader.swf

源

您的上傳目標使用端口28107;你的頁面和swfuploader.swf是從同一個端口還是默認的http端口提供的？如果沒有，你需要確保它們是或者在你的服務器上放置一個crossdomain.xml文件。有關如何編寫的說明，請參見http://yuilibrary.com/yui/docs/uploader/。

還要注意有關Flash漏洞在IE中，您可以通過添加一個隨機參數您swfuploader網址解決上述表示的。

[編輯：] 我測試了我的服務器上的文件，儘管它看起來完全可以在這裏失敗也是如此。即使是uploadstart事件也不會隨機發生。似乎是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); 
    }); 
*/ 
});

爲「上傳進度」事件的事件簽名是不同的。我使用的代碼：

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不點火

回答

相關問題