web 文件上傳組件 Plupload

時間  2019-11-12
標籤 web 文件 上傳 組件 plupload 欄目 HTML 简体版
原文   原文鏈接

Plupload官網：點擊打開連接   建議下載最新版本號，低版本號會出現瀏覽器兼容問題。javascript

近期公司有個項目需要在web端使用多文件上傳功能。剛開始準備使用HTML5來作。可是IE9下面是都不支持的，因而想到了flash，在網上搜了下各類開源的組件，最後決定使用Plupload。下面來介紹一下該組件使用時遇到的一些問題以及解決方式。php

  先貼出配置參數：css


<script type="text/javascript">
// Initialize the widget when the DOM is ready
$(function() {
    // Setup html5 version
    $("#uploader").pluploadQueue({
        // General settings
         // General settings
        runtimes : 'html5,flash,silverlight,html4',
        url : 'stroage/upload',
        unique_names:false,
        // Maximum file size
       	max_file_size : '100mb',
        chunk_size: '50mb',
        multiple_queues :true,
        // Resize images on clientside if we can
        resize : {
            width : 200,
            height : 200,
            quality : 90,
            crop: true // crop to exact dimensions
        },
 
        // Specify what files to browse for
        filters : [
			{ title : "*", extensions : "*" }
        ],
 
        // Rename files by clicking on their titles
        rename: false,
         
        // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
        dragdrop: false,
 
        // Views to activate
        views: {
            list: true,
            thumbs: true, // Show thumbs
            active: 'thumbs'
        },
 
        // Flash settings
        flash_swf_url : 'plupload/js/Moxie.swf',
     
        // Silverlight settings
        silverlight_xap_url : 'plupload/js/Moxie.xap'
    });
});
</script>

效果圖：html


   使用2.13版本號。上傳一個大於1M的文件時候。Plupload本身主動將我文件名稱改爲了 blob，官方論壇上也有很是多人貼出了這個問題，也有很多的解決方式。html5

一、改動源代碼java

二、不正確文件進行分塊，將chunk_size設置爲0ios

三、將chunk_size的值設大git


我使用前兩種方式都未解決這個問題。最後將chunk_size設置爲50mb，完美解決這個問題，詳細緣由不得而知。github

    使用過程當中，想給文件加入上傳速率。需要改動源代碼，不廢話。直接上代碼web

target.prepend(
			'<div class="plupload_wrapper plupload_scroll">' +
				'<div id="' + id + '_container" class="plupload_container">' +
					'<div class="plupload">'+

						'<div class="plupload_content">' +
							'<div class="plupload_filelist_header">' +
								'<div class="plupload_file_name">' + _('Filename') + '</div>' +
								'<div class="plupload_file_action"> </div>' +
								'<div class="plupload_file_status"><span>' + _('Status') + '</span></div>' +
								'<div class="plupload_file_size">' + _('Size') + '</div>' +
								'<div class="plupload_clearer"> </div>' +
							'</div>' +

							'<ul id="' + id + '_filelist" class="plupload_filelist"></ul>' +

							'<div class="plupload_filelist_footer">' +
								'<div class="plupload_file_name">' +
									'<div class="plupload_buttons">' +
										'<a href="#" class="plupload_button plupload_add" id="' + id + '_browse">' + _('Add Files') + '</a>' +
										'<a href="#" class="plupload_button plupload_start">' + _('Start Upload') + '</a>' +
									'</div>' +
									'<span class="plupload_upload_status"></span>' +
								'</div>' +
								'<div class="plupload_file_action"></div>' +
								'<span style="margin-left: 120px;" class="plupload_total_bytespersec">0kb/sec</span> '+
								'<div class="plupload_file_status"><span class="plupload_total_status">0%</span></div>' +
								'<div class="plupload_file_size"><span class="plupload_total_file_size">0 b</span></div>' +
								'<div class="plupload_progress">' +
									'<div class="plupload_progress_container">' +
										'<div class="plupload_progress_bar"></div>' +
									'</div>' +
								'</div>' +
								'<div class="plupload_clearer"> </div>' +
							'</div>' +
						'</div>' +
					'</div>' +
				'</div>' +
				'<input type="hidden" id="' + id + '_count" name="' + id + '_count" value="0" />' +
			'</div>'
		);

function updateTotalProgress() {
					$('span.plupload_total_bytespersec', target).html(parseInt(uploader.total.bytesPerSec/1024)+" kb/sec");
					$('span.plupload_total_status', target).html(uploader.total.percent + '%');
					$('div.plupload_progress_bar', target).css('width', uploader.total.percent + '%');
					$('span.plupload_upload_status', target).html(
						o.sprintf(_('Uploaded %d/%d files'), uploader.total.uploaded, uploader.files.length)
					);
				}

下面介紹下Plupload配置參數


   

實例化一個plupload對象時，也就是 new plupload.Uploader()，需要傳入一個對象做爲配置參數。

後面內容中出現的plupload實例均是指new plupload.Uploader()獲得的實例對象

屬性 類型 默認值 描寫敘述
browse_button String / DOM   觸發文件選擇對話框的DOM元素，當點擊該元素後便後彈出文件選擇對話框。該值可以是DOM元素對象自己。也可以是該DOM元素的id
url String   server端接收和處理上傳文件的腳本地址。可以是相對路徑(相對於當前調用Plupload的文檔)，也可以是絕對路徑
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 //不一樣意選取反覆文件
}
headers Object   設置上傳時的本身定義頭信息，以鍵/值對的形式傳入，鍵表明頭信息屬性名，鍵表明屬性值。

html4上傳方式不支持設置該屬性。
multipart Boolean true 爲true時將以multipart/form-data的形式來上傳文件，爲false時則以二進制的格式來上傳文件。

html4上傳方式不支持以二進制格式來上傳文件。在flash上傳方式中，二進制上傳也有點問題。

並且二進制格式上傳還需要在server端作特殊的處理。

通常咱們用multipart/form-data的形式來上傳文件就足夠了。
multipart_params Object   上傳時的附加參數，以鍵/值對的形式傳入，server端可是使用$_POST來獲取這些參數(以php爲例)。比方：
multipart_params: {
  one: '1',
  two: '2',
  three: { //值還可以是一個字面量對象
    a: '4',
    b: '5'
  },
  four: ['6', '7', '8']  //也可以是一個數組
}
max_retries Number 0 當發生plupload.HTTP_ERROR錯誤時的重試次數，爲0時表示不重試
chunk_size Number/String 0 分片上傳文件時，每片文件被分割成的大小，爲數字時單位爲字節。也可以使用一個帶單位的字符串。如"200kb"。當該值爲0時表示不使用分片上傳功能
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
}
drop_element DOM/String/Array   指定了使用拖拽方式來選擇上傳文件時的拖拽區域。即可以把文件拖拽到這個區域的方式來選擇文件。該參數的值可以爲一個DOM元素的id,也可是DOM元素自己，還可以是一個包含多個DOM元素的數組。假設不設置該參數則拖拽上傳功能不可用。

眼下僅僅有html5上傳方式才支持拖拽上傳。
multi_selection Boolean true 可否夠在文件瀏覽對話框中選擇多個文件，true爲可以，false爲不可以。

默認true，即可以選擇多個文件。

需要注意的是，在某些不支持多選文件的環境中。默認值是false。比方在ios7的safari瀏覽器中，因爲存在bug，形成不能多選文件。

固然，在html4上傳方式中。也是沒法多選文件的。
required_features Mix   可以使用該參數來設置你必須需要的一些功能特徵，Plupload會依據你的設置來選擇合適的上傳方式。因爲，不一樣的上傳方式。支持的功能是不一樣的。比方拖拽上傳僅僅有html5上傳方式支持，圖片壓縮則僅僅有html5,flash,silverlight上傳方式支持。

該參數的值是一個混合類型，可以是一個以逗號分隔的字符串。
unique_names Boolean false 當值爲true時會爲每一個上傳的文件生成一個惟一的文件名稱，並做爲額外的參數post到server端。參數明爲name,值爲生成的文件名稱。
runtimes String html5,flash,
silverlight,
html4		 用來指定上傳方式，指定多個上傳方式請使用逗號隔開。

普通狀況下，你不需要配置該參數。因爲Plupload默認會依據你的其它的參數配置來選擇最合適的上傳方式。

假設沒有特殊要求的話，Plupload會首先選擇html5上傳方式，假設瀏覽器不支持html5。則會使用flash或silverlight，假設前面二者也都不支持，則會使用最傳統的html4上傳方式。假設你想指定使用某個上傳方式。或改變上傳方式的優先順序，則你可以配置該參數。
file_data_name String file 指定文件上傳時文件域的名稱，默以爲file,好比在php中你可以使用$_FILES['file']來獲取上傳的文件信息
container DOM/String   用來指定Plupload所建立的html結構的父容器。默以爲前面指定的browse_button的父元素。該參數的值可以是一個元素的id,也可以是DOM元素自己。
flash_swf_url String js/Moxie.swf flash上傳組件的url地址，假設是相對路徑。則相對的是調用Plupload的html文檔。

當使用flash上傳方式會用到該參數。
silverlight_xap_url String js/Moxie.xap silverlight上傳組件的url地址。假設是相對路徑，則相對的是調用Plupload的html文檔。當使用silverlight上傳方式會用到該參數。

2、各類事件說明

要了解plupload的執行情況，靠的就是在這些事件了

Init
當Plupload初始化完畢後觸發

監聽函數參數：(uploader)

uploader爲當前的plupload實例對象
PostInit
當Init事件發生後觸發

監聽函數參數：(uploader)

uploader爲當前的plupload實例對象
OptionChanged
當使用Plupload實例的setOption()方法改變當前配置參數後觸發

監聽函數參數：(uploader,option_name,new_value,old_value)

uploader爲當前的plupload實例對象，option_name爲發生改變的參數名稱，new_value爲改變後的值，old_value爲改變前的值
Refresh
當調用plupload實例的refresh()方法後會觸發該事件，臨時不清楚還有什麼其它動做會觸發該事件，但據我測試，把文件加入到上傳隊列後也會觸發該事件。

監聽函數參數：(uploader)

uploader爲當前的plupload實例對象
StateChanged
當上傳隊列的狀態發生改變時觸發

監聽函數參數：(uploader)

uploader爲當前的plupload實例對象
UploadFile
當上傳隊列中某一個文件開始上傳後觸發

監聽函數參數：(uploader,file)

uploader爲當前的plupload實例對象，file爲觸發此事件的文件對象
BeforeUpload
當隊列中的某一個文件正要開始上傳前觸發

監聽函數參數：(uploader,file)

uploader爲當前的plupload實例對象，file爲觸發此事件的文件對象
QueueChanged
當上傳隊列發生變化後觸發，即上傳隊列新增了文件或移除了文件。QueueChanged事件會比FilesAdded或FilesRemoved事件先觸發

監聽函數參數：(uploader)

uploader爲當前的plupload實例對象
UploadProgress
會在文件上傳過程當中不斷觸發，可以用此事件來顯示上傳進度

監聽函數參數：(uploader,file)

uploader爲當前的plupload實例對象，file爲觸發此事件的文件對象
FilesRemoved
當文件從上傳隊列移除後觸發

監聽函數參數：(uploader,files)

uploader爲當前的plupload實例對象，files爲一個數組，裏面的元素爲本次事件所移除的文件對象
FileFiltered
暫不清楚該事件的意義，但依據測試得出，該事件會在每一個文件被加入到上傳隊列前觸發

監聽函數參數：(uploader,file)

uploader爲當前的plupload實例對象。file爲觸發此事件的文件對象
FilesAdded
當文件加入到上傳隊列後觸發

監聽函數參數：(uploader,files)

uploader爲當前的plupload實例對象，files爲一個數組。裏面的元素爲本次加入到上傳隊列裏的文件對象
FileUploaded
當隊列中的某一個文件上傳完畢後觸發

監聽函數參數：(uploader,file,responseObject)

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

response：server返回的文本

responseHeaders：server返回的頭信息

status：server返回的http狀態碼，比方200
ChunkUploaded
當使用文件小片上傳功能時，每一個小片上傳完畢後觸發

監聽函數參數：(uploader,file,responseObject)

uploader爲當前的plupload實例對象，file爲觸發此事件的文件對象，responseObject爲server返回的信息對象，它有下面5個屬性：

offset：該文件小片在整體文件裏的偏移量

response：server返回的文本

responseHeaders：server返回的頭信息

status：server返回的http狀態碼，比方200

total：該文件(指的是被分割成了不少文件小片的那個文件)的總大小，單位爲字節
UploadComplete
當上傳隊列中所有文件都上傳完畢後觸發

監聽函數參數：(uploader,files)

uploader爲當前的plupload實例對象。files爲一個數組，裏面的元素爲本次已完畢上傳的所有文件對象
Error
當錯誤發生時觸發

監聽函數參數：(uploader,errObject)

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

code：錯誤代碼。詳細請參考plupload上定義的表示錯誤代碼的常量屬性

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

message：錯誤信息
Destroy
當調用destroy方法時觸發

監聽函數參數：(uploader)

uploader爲當前的plupload實例對象

3、Plupload實例的屬性

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

4、Plupload實例的方法

方法 描寫敘述
init() 初始化Plupload實例
setOption(option, [value]) 設置某個特定的配置參數,option爲參數名稱，value爲要設置的參數值。

option也可以爲一個由參數名和參數值鍵/值對組成的對象，這樣就可以一次設定多個參數。此時該方法的第二個參數value會被忽略。
getOption([option]) 獲取當前的配置參數，參數option爲需要獲取的配置參數名稱，假設沒有指定option，則會獲取所有的配置參數
refresh() 刷新當前的plupload實例，臨時還不明確何時需要使用
start() 開始上傳隊列中的文件
stop() 中止隊列中的文件上傳
disableBrowse(disable) 禁用或啓用plupload的文件瀏覽按鈕,參數disable爲true時爲禁用，爲false時爲啓用。默以爲true
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實例

5、文件對象的屬性和方法

在很是多事件監聽函數中。都會提供文件對象給你

屬性/方法 描寫敘述
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() 銷燬文件對象

6、QueueProgress 對象的屬性

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

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

7、plupload命名空間上的一些屬性

plupload的命名空間上有一些屬性，用來表示一些常量。記住，不是plupload實例的屬性，而是plupload的屬性

屬性名稱 描寫敘述
VERSION 當前plupload的版本號號
STOPPED 值爲1。表明上傳隊列還未開始上傳或者上傳隊列中的文件已經上傳完畢時plupload實例的state屬性值
STARTED 值爲2。表明隊列中的文件正在上傳時plupload實例的state屬性值
QUEUED 值爲1。表明某個文件已經被加入進隊列等待上傳時該文件對象的status屬性值
UPLOADING 值爲2。表明某個文件正在上傳時該文件對象的status屬性值
FAILED 值爲4，表明某個文件上傳失敗後該文件對象的status屬性值
DONE 值爲5，表明某個文件上傳成功後該文件對象的status屬性值
GENERIC_ERROR 值爲-100，發生通用錯誤時的錯誤代碼
HTTP_ERROR 值爲-200，發生http網絡錯誤時的錯誤代碼，好比服務氣端返回的狀態碼不是200
IO_ERROR 值爲-300，發生磁盤讀寫錯誤時的錯誤代碼，好比本地上某個文件不可讀
SECURITY_ERROR 值爲-400，發生因爲安全問題而產生的錯誤時的錯誤代碼
INIT_ERROR 值爲-500，初始化時錯誤發生的錯誤代碼
FILE_SIZE_ERROR 值爲-600。當選擇的文件太大時的錯誤代碼
FILE_EXTENSION_ERROR 值爲-601，當選擇的文件類型不符合要求時的錯誤代碼
FILE_DUPLICATE_ERROR 值爲-602。當選取了反覆的文件而配置中又不一樣意有反覆文件時的錯誤代碼
IMAGE_FORMAT_ERROR 值爲-700，發生圖片格式錯誤時的錯誤代碼
IMAGE_MEMORY_ERROR 當發生內存錯誤時的錯誤代碼
IMAGE_DIMENSIONS_ERROR 值爲-702。當文件大小超過了plupload所能處理的最大值時的錯誤代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程