PLUpload文件上傳的使用

簡述

---

文件上傳，我相信大家首先想到應該會是<input type = 'file' />沒錯，作爲原生的html標準文件上傳組件，他的功能已經是足夠強大了。但是如果說想要獨擋一面，還是略顯乏力。對於大，多文件的處理他就顯得力不從心了。

PLUpload

---

在做較大的視頻文件上傳的時候突然遇到了瓶頸，我也嘗試了一些其他的上傳組件比如：SWFUpload，不過後來還是選擇了PLUpload（TinyMCE團隊），也許是因爲他使用起來簡單而且功能強大吧。功能強大的它有哪些特性呢！

1. 自適應上傳方式。根據程序當前的環境會在HTML5、flash、silverlight、input這些方式中選擇最優方案 ，如果支持Html5的話他會優先使用這種方式。
2. 壓縮圖片可以在前端進行處理
3. 大文件分片上傳，分割成小片進行一個大文件的上傳。

實例一：音樂文件的上傳

實例二：多文件的支持，上傳進度的顯示

使用

---

那到底要以什麼樣的方式來使用它呢！下面我們一起來看下，大致的使用流程：

1. 相關文件的引入

<script type="text/javascript" src="/Scripts/Upload/bootstrap.min.js" />
<script type="text/javascript" src="/Scripts/Upload/jquery.plupload.queue.min.js" />
<script type="text/javascript" src="/Scripts/Upload/plupload.min.js" />
<script type="text/javascript" src="/Scripts/Upload/plupload.flash.min.js" />
<script type="text/javascript" src="/Scripts/Upload/MyUpload.js" />

2.實例化我們需要的對象，這部分主要是對於上傳參數的一個配置

//實例化一個plupload上傳對象
var uploader = new plupload.Uploader({ 
    browse_button: 'browse',
    url: '/Upload/upload.aspx',
    flash_swf_url: '/Scripts/Upload/plupload.flash.swf',
    silverlight_xap_url: '/Scripts/Upload/Moxie.xap',
    //使用Flash插件
    runtimes: 'flash',
    //最大文件限制
    max_file_size: '100mb',
    //一次上傳數據大小
    chunk_size: '100mb',    
    unique_names: false,    //是否自動生成唯一名稱
    //filters: [                //文件類型限制
    //  {title: "圖片文件", extensions: "jpg,gif,png" },
    //  { title: "壓縮文件", extensions: "zip,rar" }
    //],

    // 縮放圖片
    resize: { width: 320, height: 240, quality: 80 },
    init: {
        FileUploaded: function (up, file, info) {
            isAdd = false;
            hideLoading();
            //一個文件上傳成功
            //上傳成功後您的業務邏輯
        },
        Error: function (up, args) {
            //發生錯誤
            if (args.file) {
                alert('[error] File:' + args.file + "   " + args.message);
            } else {
                alert('[error]' + args.message);
            }
        }
    }
});

3.使用時我們需要先初始化該組件，調用init方法：

uploader.init(); //初始化

我們也可以根據需要爲其綁定相關的事件,下面列舉兩個我認爲比較常用的事件：文件添加以及進度更新

//綁定文件添加進隊列事件
uploader.bind('FilesAdded', function (uploader, files) {
   //一個文件被添加了
   //uploader爲當前實例對象，files數組，上傳隊列裏的文件對象
});

//綁定上傳進度觸發事件
uploader.bind('UploadProgress', function (uploader, file) {
    //從這裏我們可以動態得到控制前端的進度條顯示   
    //file.percent爲當前的進度
    //file.loaded爲已經上傳的大小
    //file.size爲文件的總大小
});

4.文件選擇完畢後將其上傳到指定的後臺服務器（Url是在上面第一步那裏配置）

///開始上傳。
function StartUp() {
    uploader.start();
}

擴展

其實對於組件的使用其實並不會有什麼難點，我們在使用一個組件的時候通常會更加關注這個組件有哪些屬性方法，可以給我們帶來怎麼樣的一個擴展性。我這邊羅列出一些相關的屬性！

配置參數—–組件實例化

1. browse_button：文件選擇對話框的DOM元素，就是點擊觸發選擇文件的那個元素。
2. url：服務端處理上傳的url
3. filters：限制上傳文件的類型，大小等。mime_types==》用來限定上傳文件的類型 ，max_file_size==》限定上傳文件的大小，prevent_duplicates==》是否允許選取重複的文件
4. multipart：爲true時將以multipart/form-data的形式來上傳文件，爲false時則以二進制的格式來上傳文件。
5. max_retries：當發生plupload.HTTP_ERROR錯誤時的重試次數，爲0時表示不重試
6. chunk_size：分片上傳文件時，每片文件被切割成的大小，爲數字時單位爲字節。
7. resize：圖片壓縮參數5個屬性：width==》壓縮後圖片的寬度，height==》壓縮後圖片的高度，crop==》是否裁剪圖片，quality==》壓縮後圖片的質量（jpg的圖片有效，默認爲90）
8. multi_selection：是否可以在文件瀏覽對話框中選擇多個文件，true爲可以，false爲不可以。
9. unique_names：是否生成唯一文件名。
10. runtimes：指定上傳方式（html5,flash,silverlight,html4）
11. file_data_name：上傳文件域名稱
12. flash_swf_url：flash上傳組件的url地址
13. silverlight_xap_url：silverlight上傳組件的url地址

事件—–綁定（bind）
1. Init：Plupload初始化完成後觸發，參數：uploader當前的plupload實例對象
2. OptionChanged：當使用Plupload實例的setOption()方法改變當前配置參數後觸發，參數：(uploader,option_name,new_value,old_value)：uploader爲當前的plupload實例對象，option_name爲發生改變的參數名稱，new_value爲改變後的值，old_value爲改變前的值
3. UploadFile：當上傳隊列中某一個文件開始上傳後觸發，參數：(uploader,file)：uploader爲當前的plupload實例對象，file爲觸發此事件的文件對象
4. BeforeUpload：上傳前觸發，參數同3
5. UploadProgress：會在文件上傳過程中不斷觸發，可以用此事件來顯示上傳進度，參數：(uploader，file)：uploader爲當前的plupload實例對象，file爲觸發此事件的文件對象
6. FilesRemoved：當文件從上傳隊列移除後觸發，參數同3
7. FilesAdded：當文件從上傳隊列添加後觸發，參數同3
8. FileUploaded：上傳完成後觸發，參數：(uploader,file,responseObject)uploader爲當前的plupload實例對象，file爲觸發此事件的文件對象，responseObject爲服務器返回的信息對象（response，responseHeaders，status）
9. UploadComplete：當上傳隊列中所有文件都上傳完成後觸發，參數同3
10. Error：當發生錯誤時觸發，參數：(uploader,errObject)，uploader爲當前的plupload實例對象，errObject爲錯誤對象，3個主要屬性(code：錯誤代碼，file：與該錯誤相關的文件對象，message：錯誤信息）
11. Destroy：當調用destroy方法時觸發，參數：(uploader)：uploader爲當前的plupload實例對象

實例方法—–uploader
1. init()，初始化Plupload實例
2. setOption(option, [value])，設置配置參數
3. getOption([option])，獲取配置參數
4. refresh()，刷新
5. start()，開始上傳
6. stop()，停止上傳
7. disableBrowse(disable)，禁用或啓用plupload的文件瀏覽按鈕
8. getFile(id)，通過id來獲取文件對象
9. addFile(file, [fileName])，向上傳隊列中添加文件，如果成功添加了文件，會觸發FilesAdded事件
10. removeFile(file)，從上傳隊列中移除文件，參數file爲plupload文件對象或先前指定的文件名稱
11. splice(start, length)，從上傳隊列中移除一部分文件
12. trigger(name, Multiple)，觸發某個事件
13. hasEventListener(name)，用來判斷某個事件是否有監聽函數，name爲事件名稱
14. bind(name, func, scope)，給某個事件綁定監聽函數
15. unbind(name, func)，移除事件的監聽函數
16. unbindAll()，移除所有事件的所有監聽函數
17. destroy()，銷燬plupload實例
說明
至此我只列出我個人覺得較爲重要，或者是我項目中有使用到的函數，相關屬性的配置。這個的組件功能還是很強大的，具體的文檔可以關注下官方給出的文檔介紹。官網鏈接

小結

---

看文檔說明是比較乏味的，但是像這種開源的組件之類的我們想要更好的更貼合自己的程序的話我們不免要多多的研究下，組件所能提供的Api！耐心：程序猿所必修的一門課。
謝謝大家的支持，轉載請註明出處！