前端上傳元件Plupload使用指南【轉】
我之前寫過一篇文章《檔案上傳利器SWFUpload使用指南》，裡面介紹了上傳元件SWFUpload的使用方法，但現在隨著html5技術的逐漸推廣和普及，再去使用以flash為上傳手段的SWFUpload顯然就有點過時了，畢竟html5原生的就給我們提供了檔案上傳的API。Plupload是一款由著名的web編輯器TinyMCE團隊開發的上傳元件，簡單易用且功能強大，我們完全可以使用Plupload來代替以前的SWFUpload。
Plupload有以下功能和特點：
1、擁有多種上傳方式：HTML5、flash、silverlight以及傳統的。Plupload會自動偵測當前的環境，選擇最合適的上傳方式，並且會優先使用HTML5的方式。所以你完全不用去操心當前的瀏覽器支援哪些上傳方式，Plupload會自動為你選擇最合適的方式。
2、支援以拖拽的方式來選取要上傳的檔案
3、支援在前端壓縮圖片，即在圖片檔案還未上傳之前就對它進行壓縮
4、可以直接讀取原生的檔案資料，這樣的好處就是例如可以在圖片檔案還未上傳之前就能把它顯示在頁面上預覽
5、支援把大檔案切割成小片進行上傳，因為有些瀏覽器對很大的檔案比如幾G的一些檔案無法上傳。
Plupload的使用方法也與SWFUpload非常類似，可以分為以下幾步：
1、引入js檔案，plupload的原始檔可以到github上去下載
2、例項化一個plupload物件，傳入一個配置引數物件進行各方面的配置。
3、呼叫plupload例項物件的init()方法進行初始化
4、在plupload例項物件上註冊各種你需要的事件。plupload從選取檔案到檔案上傳完成這個過程中，會觸發很多事件。我們可以通過這些事件來跟plupload進行互動。
5、實現你自己所註冊的那些事件的監聽函式，利用這些監聽函式來進行更新UI、提示上傳進度等工作。
大家可以到http://chaping.github.io/plupload/demo/看一下我寫的關於plupload的幾個上傳demo。
下面用一段程式碼來說明Plupload的使用方法。
首先看下我的目錄結構
index.html的程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Plupload使用指南</title> <!-- 首先需要引入plupload的原始碼 --> <script src="js/plupload.full.min.js"></script> </head> <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 : 'upload.php', //伺服器端的上傳頁面地址 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){ //每個事件監聽函式都會傳入一些很有用的引數， //我們可以利用這些引數提供的資訊來做比如更新UI，提示上傳進度等操作 }); uploader.bind('UploadProgress',function(uploader,file){ //每個事件監聽函式都會傳入一些很有用的引數， //我們可以利用這些引數提供的資訊來做比如更新UI，提示上傳進度等操作 }); //...... //...... //最後給"開始上傳"按鈕註冊事件 document.getElementById('start_upload').onclick = function(){ uploader.start(); //呼叫例項物件的start()方法開始上傳檔案，當然你也可以在其他地方呼叫該方法 } </script> </body> </html>
使用Plupload的關鍵是瞭解它眾多的配置引數、事件以及屬性和方法。我把它官網上的文件翻譯成了中文並整理如下。我也把它放到了github上，你可以到http://chaping.github.io/plupload/doc/去查閱。
目錄：
一、配置引數
例項化一個plupload物件時，也就是new plupload.Uploader()，需要傳入一個物件作為配置引數。後面內容中出現的plupload例項均是指new plupload.Uploader()得到的例項物件
更多詳細請參考：https://www.cnblogs.com/2050/p/3913184.html