Plupload上傳插件簡單整理

Plupload

Plupload是有TinyMCE的開發者開發的，爲您的內容管理系統或是相似上傳程序提供一個高度可用的上傳插件。Plupload 目前分爲一個核心API 和一個jQuery上傳隊列部件，這樣使你能夠直接使用或是本身定製。

功能和特色：

一、擁有多種上傳方式：HTML五、flash、silverlight以及傳統的<input type=」file」 />。Plupload會自動偵測當前的環境，選擇最合適的上傳方式，而且會優先使用HTML5的方式。因此你徹底不用去操心當前的瀏覽器支持哪些上傳方式，Plupload會自動爲你選擇最合適的方式。

二、支持以拖拽的方式來選取要上傳的文件

三、支持在前端壓縮圖片，即在圖片文件還未上傳以前就對它進行壓縮

四、能夠直接讀取原生的文件數據，這樣的好處就是例如能夠在圖片文件還未上傳以前就能把它顯示在頁面上預覽

五、支持把大文件切割成小片進行上傳，由於有些瀏覽器對很大的文件好比幾G的一些文件沒法上傳。

六、支持文件過濾上傳

依賴及兼容

依賴性

不依賴於任何庫和框架

兼容性

支持Firefox、Chrome、 Safari、 IE6,7,8,9,10,11

注意：

一、分塊:chrome和firefox 4+ 支持。

二、拖拽適用於firefox和webkit內核的瀏覽器，windows版的safari還存在一些問題待解決。

三、圖片縮放僅在firefox3.5+和chrome上支持，safari/opera 不支持直接數據訪問選定的文件。

四、 多文件上傳僅支持gecko和webkit內核的瀏覽器。

安裝使用

1.引用

plupload的源文件能夠到github上去下載，而後經過script標籤引用：

<script src="js/plupload.full.min.js"></script>

2.初始化

var uploader = new plupload.Uploader({
     browse_button: 'browse', //觸發文件選擇對話框的按鈕，爲那個元素id或者元素自己
     url: 'upload.php' //文件上傳url地址
});
uploader.init();

經常使用案例

1.文件普通上傳

var uploader = new plupload.Uploader({
  browse_button: 'browse', //觸發文件選擇對話框的按鈕，爲那個元素id或者元素自己
  url: 'upload.php' //文件上傳url地址
});
uploader.init()
document.getElementById('uploadfiles').onclick = function() {
  uploader.start();
  return false;
};

2.文件拖拽上傳

配置參數：drop_element

屬性	類型	默認值	描述
drop_element	DOM/String/Array		指定了使用拖拽方式來選擇上傳文件時的拖拽區域，便可以把文件拖拽到這個區域的方式來選擇文件。該參數的值能夠爲一個DOM元素的id,也但是 DOM元素自己，還能夠是一個包括多個DOM元素的數組。若是不設置該參數則拖拽上傳功能不可用。目前只有html5上傳方式才支持拖拽上傳。

代碼示例：

var uploader = new plupload.Uploader({
  browse_button: 'browse', //觸發文件選擇對話框的按鈕，爲那個元素id或者元素自己
  url: 'upload.php' //文件上傳url地址
  drop_element: 'drop', //拖拽區域元素ID或者元素自己
});
uploader.init();
document.getElementById('uploadfiles').onclick = function() {
  uploader.start();
  return false;
};

3.圖片壓縮上傳

配置參數：resize

屬性	類型	默認值	描述
resize	Object		可使用該參數對將要上傳的圖片進行壓縮，該參數是一個對象，裏面包括5個屬性： width：指定壓縮後圖片的寬度，若是沒有設置該屬性則默認爲原始圖片的寬度 height：指定壓縮後圖片的高度，若是沒有設置該屬性則默認爲原始圖片的高度 crop：是否裁剪圖片 quality：壓縮後圖片的質量，只對jpg格式的圖片有效，默認爲90。quality能夠跟width和height一塊兒使用，但也能夠單獨使用，單獨使用時，壓縮後圖片的寬高不會變化，但因爲質量下降了，因此體積也會變小 preserve_headers：壓縮後是否保留圖片的元數據，true爲保留，false爲不保留,默認爲true。刪除圖片的元數據能使圖片的體積減少一點點 resize參數的配置示例以下： resize: {width: 100,height: 100,crop: true,quality: 60,preserve_headers: false}

代碼示例：

var uploader = new plupload.Uploader({
  browse_button: 'browse', //觸發文件選擇對話框的按鈕，爲那個元素id或者元素自己
  url: 'upload.php' //文件上傳url地址
  resize: {
    width: 100,
    height: 100,
    crop: true,
    quality: 60,
    preserve_headers: false
  }
});
uploader.init();
document.getElementById('uploadfiles').onclick = function() {
  uploader.start();
  return false;
};

4.文件過濾上傳

配置參數：filters

屬性	類型	默認值	描述
filters	Object	{}	可使用該參數來限制上傳文件的類型，大小等，該參數以對象的形式傳入，它包括三個屬性： mime_types：用來限定上傳文件的類型，爲一個數組，該數組的每一個元素又是一個對象，該對象有title和extensions兩個屬性，title爲該過濾器的名稱，extensions爲文件擴展名，有多個時用逗號隔開。該屬性默認爲一個空數組，即不作限制。 max_file_size：用來限定上傳文件的大小，若是文件體積超過了該值，則不能被選取。值能夠爲一個數字，單位爲b,也能夠是一個字符串，由數字和單位組成，如’200kb’。 prevent_duplicates：是否容許選取重複的文件，爲true時表示不容許，爲false時表示容許，默認爲false。若是兩個文件的文件名和大小都相同，則會被認爲是重複的文件 filters完整的配置示例以下(固然也能夠只配置其中的某一項)： filters: {mime_types : [ //只容許上傳圖片和zip文件{ title : "Image files", extensions : "jpg,gif,png" },{ title : "Zip files", extensions : "zip" }],max_file_size : '400kb', //最大隻能上傳400kb的文件prevent_duplicates : true //不容許選取重複文件}

代碼示例：

var uploader = new plupload.Uploader({
        browse_button: 'browse', // this can be an id of a DOM element or the DOM element itself
        url: 'upload.php',
        filters: {
            mime_types: [ //只容許上傳圖片和zip文件
                { title: "Image files", extensions: "jpg,gif,png" },
                { title: "Zip files", extensions: "zip" }
            ],
            max_file_size: '400kb', //最大隻能上傳400kb的文件
            prevent_duplicates: true //不容許選取重複文件
        }

    });
    uploader.init();
     document.getElementById('start-upload').onclick = function () {
        uploader.start();
    };

5.文件分片上傳

配置參數： chunk_size

屬性	類型	默認值	描述
chunk_size	Number/String	0	分片上傳文件時，每片文件被切割成的大小，爲數字時單位爲字節。也可使用一個帶單位的字符串，如"200kb"。當該值爲0時表示不使用分片上傳功能

代碼示例：

var uploader = new plupload.Uploader({
  browse_button: 'browse', //觸發文件選擇對話框的按鈕，爲那個元素id或者元素自己
  url: 'upload.php' //文件上傳url地址
  chunk_size: '200kb', //拖拽區域元素ID或者元素自己
  });
  uploader.init();
  document.getElementById('uploadfiles').onclick = function() {
    uploader.start();
    return false;
  };

經常使用事件

1.UploadProgress

會在文件上傳過程當中不斷觸發，能夠用此事件來顯示上傳進度監聽函數參數：(uploader,file)

uploader爲當前的plupload實例對象，file爲觸發此事件的文件對象

2.FilesRemoved

當文件從上傳隊列移除後觸發監聽函數參數：(uploader,files)

uploader爲當前的plupload實例對象，files爲一個數組，裏面的元素爲本次事件所移除的文件對象

3.FilesAdded

當文件添加到上傳隊列後觸發監聽函數參數：(uploader,files)

uploader爲當前的plupload實例對象，files爲一個數組，裏面的元素爲本次添加到上傳隊列裏的文件對象

4.FileUploaded

當隊列中的某一個文件上傳完成後觸發監聽函數參數：(uploader,file,responseObject)

uploader爲當前的plupload實例對象，file爲觸發此事件的文件對象，responseObject爲服務器返回的信息對象，它有如下3個屬性：

response：服務器返回的文本

responseHeaders：服務器返回的頭信息

status：服務器返回的http狀態碼，好比200

5.UploadComplete

當上傳隊列中全部文件都上傳完成後觸發監聽函數參數：(uploader,files)

uploader爲當前的plupload實例對象，files爲一個數組，裏面的元素爲本次已完成上傳的全部文件對象

6.Error：

當發生錯誤時觸發監聽函數參數：(uploader,errObject)

uploader爲當前的plupload實例對象，errObject爲錯誤對象，它至少包含如下3個屬性(由於不一樣類型的錯誤，屬性可能會不一樣)：

code：錯誤代碼，具體請參考plupload上定義的表示錯誤代碼的常量屬性

file：與該錯誤相關的文件對象

message：錯誤信息

Plupload實例的屬性和方法

1.屬性

屬性	描述
id	Plupload實例的惟一標識id
state	當前的上傳狀態，可能的值爲plupload.STARTED或plupload.STOPPED，該值由Plupload實例的stop()``或statr()方法控制。默認爲plupload.STOPPED`
runtime	當前使用的上傳方式
files	當前的上傳隊列，是一個由上傳隊列中的文件對象組成的數組
settings	當前的配置參數對象
total	表示整體進度信息的QueueProgress對象

2.方法

方法	描述
init()	初始化Plupload實例
setOption(option, [value])	設置某個特定的配置參數,option爲參數名稱，value爲要設置的參數值。option也能夠爲一個由參數名和參數值鍵/值對組成的對象，這樣就能夠一次設定多個參數，此時該方法的第二個參數value會被忽略。
getOption([option])	獲取當前的配置參數，參數option爲須要獲取的配置參數名稱，若是沒有指定option，則會獲取全部的配置參數
start()	開始上傳隊列中的文件
stop()	中止隊列中的文件上傳
getFile(id)	經過id來獲取文件對象
addFile(file, [fileName])	向上傳隊列中添加文件，若是成功添加了文件，會觸發FilesAdded事件。參數file爲要添加的文件,能夠是一個原生的文件,或者一個plupload文件對象,或者一個input[type="file"]元素,還能夠是一個包括前面那幾種東西的數組；fileName爲給該文件指定的名稱
removeFile(file)	從上傳隊列中移除文件，參數file爲plupload文件對象或先前指定的文件名稱
splice(start, length)	從上傳隊列中移除一部分文件，start爲開始移除文件在隊列中的索引，length爲要移除的文件的數量，該方法的返回值爲被移除的文件。該方法會觸發FilesRemoved 和QueueChanged事件
trigger(name, Multiple)	觸發某個事件。name爲要觸發的事件名稱，Multiple爲傳給該事件監聽函數的參數，是一個對象
hasEventListener(name)	用來判斷某個事件是否有監聽函數，name爲``事件名稱| |bind(name, func, scope) |給某個事件綁定監聽函數，name爲事件名，func爲監聽函數，scope爲監聽函數的做用域，也就是監聽函數中this的指| |unbind(name, func)|移除事件的監聽函數，name爲事件名稱，func`爲要移除的監聽函數
unbindAll()	移除全部事件的全部監聽函數
destroy()	銷燬plupload實例

QueueProgress 對象的屬性

plupload實例的total屬性是一個QueueProgress對象

屬性	描述
size	上傳隊列中全部文件加起來的總大小，單位爲字節
loaded	隊列中當前已上傳文件加起來的總大小,單位爲字節
uploaded	已完成上傳的文件的數量
failed	上傳失敗的文件數量
queued	隊列中剩下的(也就是除開已經完成上傳的文件)須要上傳的文件數量
percent	整個隊列的已上傳百分比，如50就表明50%
bytesPerSec	上傳速率，單位爲 byte/s，也就是 字節/秒

文件對象的屬性和方法

在不少事件監聽函數中，都會提供文件對象給你

屬性/方法	描述
id	文件id
name	文件名，例如」myfile.gif」
type	文件類型，例如」image/jpeg」
size	文件大小，單位爲字節，當啓用了客戶端壓縮功能後，該值可能會改變
origSize	文件的原始大小，單位爲字節
loaded	文件已上傳部分的大小，單位爲字節
percent	文件已上傳部分所佔的百分比，如50就表明已上傳了50%
status	文件的狀態，可能爲如下幾個值之一：plupload.QUEUED, plupload.UPLOADING, plupload.FAILED, plupload.DONE
lastModifiedDate	文件最後修改的時間
getNative()	獲取原生的文件對象
getSource()	獲取mOxie.File 對象，想了解mOxie是什麼東西，能夠看下https://github.com/moxiecode/moxie/wiki/API
destroy()	銷燬文件對象

參考資料

1.Plupload官網

2.Plupload上傳插件中文幫助文檔