plupload檔案上傳外掛程式

標籤：

 

一 資來源文件

二 基本使用

三 可能遇到的問題

 

一 資來源文件

Git倉庫地址：https://github.com/moxiecode/plupload

一個中文速查：http://www.cnblogs.com/2050/p/3913184.html

可能有用的demo: http://chaping.github.io/plupload/demo/index.html

 

二 基本使用

html:

<ul id="filelist"></ul><br /><div id="container">    <a id="browse" href="javascript:;">[Browse...]</a>     <a id="start-upload" href="javascript:;">[Start Upload]</a></div><br /><pre id="console"></pre>

js:

<script type="text/javascript">var uploader = new plupload.Uploader({    browse_button: ‘browse‘,    url: ‘upload.php‘}); uploader.init(); uploader.bind(‘FilesAdded‘, function(up, files) {    var html = ‘‘;    plupload.each(files, function(file) {        html += ‘<li id="‘ + file.id + ‘">‘ + file.name + ‘ (‘ + plupload.formatSize(file.size) + ‘) <b></b></li>‘;    });    document.getElementById(‘filelist‘).innerHTML += html;}); uploader.bind(‘UploadProgress‘, function(up, file) {    document.getElementById(file.id).getElementsByTagName(‘b‘)[0].innerHTML = ‘<span>‘ + file.percent + "%</span>";}); uploader.bind(‘Error‘, function(up, err) {    document.getElementById(‘console‘).innerHTML += "\nError #" + err.code + ": " + err.message;}); document.getElementById(‘start-upload‘).onclick = function() {    uploader.start();};</script>

主要是使用options配置參數，使用內建函數添加方法，使用init()方法初始化uploader。

 

1 Options( 配置參數)

只有兩個option是必須的:  browse_button和url，剩下的都是可選的。

browse_button可以是DOM元素本身或者它的id。

url是服務端的fileupload handler

2 Events（各種事件）

常用的事件：

Init：當Plupload初始化完成後觸發

PostInit：當Init事件發生後觸發

FilesAdded：當檔案添加到上傳隊列後觸發

FileUploaded：當隊列中的某一個檔案上傳完成後觸發

UploadComplete：當上傳隊列中所有檔案都上傳完成後觸發

Error：當發生錯誤時觸發

可以根據error code捕捉到各種錯誤，各種錯誤碼在plupload命名空間上的一些屬性都可以找到。

3 Properties（plupload執行個體屬性）

常用的屬性：

id: uploader執行個體的唯一id

state: 整個上傳的目前狀態，可能是plupload.STARTED 或者 plupload.STOPPED. 可以通過stop/start方法控制. 預設值值STOPPED。

files: 當前上傳隊列，是一個檔案執行個體的數組。

total：總的上傳進度資訊。包括多少檔案已經上傳完成，進度百分比等。

4 Methods(plupload執行個體方法)

常用的方法：

init()

初始化uploader執行個體並添加內部事件監聽函數。

start()

開始上傳隊列檔案

stop()

停止上傳隊列檔案

5檔案對象的屬性和方法

在很多事件監聽函數中，都會提供檔案對象。其中FilesAdded，FilesRemoved和UploadComplete提供的是檔案對象的數組，因為plupload允許同時選取多個檔案。檔案對象的屬性包括name(檔案名稱)，type(檔案類型)，size(檔案大小等)，status（檔案狀態等）。檔案方法包括getNative()(擷取原生的檔案對象), getSource()(擷取mOxie.File 對象)，關於oMoxie,後面會說明。

6 plupload命名空間上的一些屬性

主要是檔案對象的status屬性, plupload執行個體的state屬性和各種錯誤的error code

1）state: STOPPED(1)， STARTED(2)

2）status：QUEUED（1），UPLOADING（2）， FAILED（4），DONE，（5）

3）error code:

HTTP_ERROR(-200): 發生http網路錯誤時

FILE_SIZE_ERROR(-600): 當選擇的檔案太大時

FILE_EXTENSION_ERROR(-601); 當選擇的檔案類型不符合要求時

FILE_DUPLICATE_ERROR(-602)； 當選取了重複的檔案而配置中又不允許有重複檔案時

IMAGE_DIMENSIONS_ERROR(-702)： 當檔案大小超過了plupload所能處理的最大值時

三 可能遇到的問題

1 關於ie9 runtimes

Plupload是一個multi-runtime的檔案上傳API。

runtimes預設值為: "html5,flash,silverlight,html4"。可以在options中配置。

一般情況下，不需要配置該參數，因為Plupload預設會根據你的其他的參數配置來選擇最合適的上傳方式。如果沒有特殊要求的話，Plupload會首先選擇html5上傳方式，如果瀏覽器不支援html5，則會使用flash或silverlight，如果前面兩者也都不支援，則會使用最傳統的html4上傳方式。

在ie9瀏覽器下，不支援flash，需要使用oMxie的polyfill，藉助的就是Moxie.swf。需要在options中配置兩個option：flash_swf_url和silverlight_xap_url。分別對應flash上傳組件的url地址和silverlight上傳組件的url地址，如果是相對路徑，則相對的是調用Plupload的html文檔。

當找不到Moxie.swf檔案時，runtimes會fallback到html4。下面兩個就是找不到檔案和找到檔案時情況，moxie-shim的class會不同。當ie9下出現moxie-shim-html4，通常是沒有找到Moxie.swf檔案，會出現ie9的一些相容性問題，比如瀏覽圖片按鈕不好點擊或者前端預覽圖片無法顯示等問題。

 

瞭解oMxie：https://github.com/moxiecode/moxie/wiki/API

2關於flash跨域請求

在Flash中發起HTTP請求外部網站的資源時會引起Flash的跨域問題。

出現跨域問題時，Flash會先訪問對方網站根目錄的crossdomain.xml檔案。

crossdomain.xml檔案可以定義哪些網站有許可權訪問本網站的資源。

所以如果我們要允許別的網站跨域訪問本網的資源需要在根目錄下加入crossdomain.xml檔案。

 

<?xml version="1.0"?>

<cross-domain-policy>

    <allow-access-from domain="wuage.com" />

</cross-domain-policy>

配置很簡單，domain表示允許訪問的網域名稱。

plupload檔案上傳外掛程式