官網:https://github.com/moxiecode/plupload
中文文檔:http://www.cnblogs.com/2050/p/3913184.html
直接上幹貨
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>plupload前端上傳插件</title>
</head>
<!-- include libraries(jQuery, bootstrap) -->
<script type="text/javascript" src="__ROOT__/Public/js/jquery.min.js"></script>
<script type="text/javascript" src="__ROOT__/Public/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="__ROOT__/Public/css/bootstrap.min.css" target="_blank" rel="external nofollow" />
<script src="__ROOT__/Public/plugins/plupload/js/plupload.full.min.js"></script>
<body>
<!-- 這裡我們隻使用最基本的html結構:一個選擇檔案的按鈕,一個開始上傳檔案的按鈕(甚至該按鈕也可以不要) -->
<p>
<button id="browse">選擇檔案</button>
<button id="start_upload">開始上傳</button>
</p>
<script>
//執行個體化一個plupload上傳對象
var uploader = new plupload.Uploader({
browse_button : 'browse', //觸發檔案選擇對話框的按鈕,為那個元素id
url : "{:U('Test/upload')}", //伺服器端的上傳頁面位址
flash_swf_url : 'js/Moxie.swf', //swf檔案,當需要使用swf方式進行上傳時需要配置該參數
silverlight_xap_url : 'js/Moxie.xap' //silverlight檔案,當需要使用silverlight方式進行上傳時需要配置該參數
});
//在執行個體對象上調用init()方法進行初始化
uploader.init();
//當檔案添加到上傳隊列後觸發
uploader.bind('FilesAdded',function(uploader,files){
uploader.start();
});
//當隊列中的某一個檔案上傳完成後觸發
uploader.bind('FileUploaded',function(uploader,file,responseObject){
//alert(responseObject.response);
console.log(uploader);
console.log(file);
console.log(responseObject);
});
//會在檔案上傳過程中不斷觸發,可以用此事件來顯示上傳進度
uploader.bind('UploadProgress',function(uploader,file){
//TODO
alert('a');
});
//最後給"開始上傳"按鈕注冊事件
document.getElementById('start_upload').onclick = function(){
uploader.start(); //調用執行個體對象的start()方法開始上傳檔案,當然你也可以在其他地方調用該方法
}
</script>
</body>
</html>