天天看點

plupload一個前端上傳元件

官網: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>
           

繼續閱讀