使用Uploadify(UploadiFive)多文件上傳控件遇到的坑

時間 2019-11-10

標籤使用 uploadify uploadifive 文件上傳控件遇到简体版

原文原文鏈接

最近項目中須要實現多文件上傳功能，因而結合需求最終選擇了Uploadify這一款控件來實現。相比其餘控件，Uploadify具備簡潔的界面，功能API基本能夠解決大多數需求，又是基於jquery的，配置起來相對容易。可是不用不知道，一用起來發現坑仍是蠻多了，相信大部分用過的人都會遇到，下面就來分享下個人填坑過程：javascript

根據官網文檔配置好我所須要的前端配置項，再讓後臺同事把對應的後臺配置搞定後，在chrome下嘗試了下一些ok。心想這樣就大工告成了？呵呵。。。那麼問題來了。php

1、使用Uploadifyhtml

（1）、chrome報錯前端

按F12打開調試面板刷新頁面後會顯示以下錯誤信息：html5

這是啥？請求了3次失敗了2次最後成功了1次，後來發現只有chrome下會報這個錯誤，大概是由於chrome對於swf文件的安全性措施致使的，由於不影響功能，暫時沒去管它。java

（2）、發現火狐上失效jquery

當我打開火狐的時候，忽然發現按鈕失效，就是一個type='file'的按鈕，只能單文件上傳，緣由很簡單，那即是火狐檢測不到個人flash。而Uploadify是一款利用flash來實現多文件上傳功能，這對沒有安裝flash的用戶來講無疑根本無法用。git

好吧，可是我選擇先忍了，由於開發的是一款後臺應用，給本身人用的，因此大不了讓他們安裝下flash，使用chrome瀏覽器來訪問好了。github

（3）、文件上傳完畢後會自動消失web

根據項目需求，文件上傳完畢後仍然留在頁面上，並顯示相應信息。然而Uploadify默認上傳成功後會自動刪除頁面上的文件。這個問題解決起來很簡單，有相應的API來實現：

1 $("#file_upload").uploadify({ 2         'removeCompleted' : false, 3         'swf'             : '/uploadify/uploadify.swf', 4         'uploader'        : '/uploadify/uploadify.php' 
5 });

將removeCompleted設置爲false便可。若是須要將上傳失敗的文件也保留在頁面上，能夠設置'removeTimeout' 的值無限制大，這樣不用設置removeCompleted也行。

（4）上傳完畢文件沒法清除

若是保留上傳完畢文件，那麼呵呵了，文件不會由於你觸發cancel方法而清除，即便頁面上清除了，等你再選擇已經上傳完的文件後，會顯示提示你文件已存在，是否覆蓋的彈框。

百度許久後發現這是一個公認的bug，暫時沒有很好的解決方案。因而我再也忍不住了，果斷捨棄flash版本的Uploadify，換用其html5版本的UploadiFive。

2、使用UploadiFive

然而自從換了UploadiFive後，心情果斷舒暢了不少，以前（1）（2）（3）（4）中的問題蕩然無存了，心想這不是逼咱們購買付費版嘛。。。

可是UploadiFive卻拋棄了Uploadify中的一些功能：

(1)無未上傳文件重複提示

Uploadify中添加同名文件會提示是否覆蓋，而UploadiFive倒是直接覆蓋，沒有提示信息。能夠接受。

(2)上傳完畢後進度條消失

Uploadify中上傳完畢會默認保留進度條並顯示100%，前提設置removeCompleted爲false，而UploadiFive中上傳完畢後進度條自動消失。勉強接受。

(3)無自動檢測文件大小功能

Uploadify中選擇文件加入隊列後，會在文件名後自動加上該文件的大小，而UploadiFive卻沒有該功能，這不是故意爲難咱們嗎......僞裝接受不了。因而開始研究其源代碼。

1個多小時後解決了這個問題。

下面是解決方案：

首先UploadiFive的js文件是壓縮過的，最好還原其源代碼，在sublime text3中安裝HTML-CSS-JS Prettify插件後利用快捷鍵shift+alt+H 可快速實現js格式化。

格式化後找到jquery.uploadifive.js中的$data.addQueueItem方法，在

file.queueItem.find('.filename').html(fileName)後添加

/*如下添加文件大小檢測*/
var fileSize = Math.round(file.size / 1024); var suffix = 'KB'; if (fileSize > 1000) { fileSize = Math.round(fileSize / 1000); suffix = 'MB'; } var fileSizeParts = fileSize.toString().split('.'); fileSize = fileSizeParts[0]; if (fileSizeParts.length > 1) { fileSize += '.' + fileSizeParts[1].substr(0, 2); } fileSize += suffix; file.queueItem.find('.filesize').html('('+fileSize+')'); /*以上添加文件大小檢測*/

同時找到$data.queueItem，在其中添加<span class="filesize"></span>

if (settings.itemTemplate == false) { $data.queueItem = $('<div class="uploadifive-queue-item">\ <a class="close" href="#">X</a>\ <div><span class="filename"></span><span class="filesize"></span><span class="fileinfo"></span></div>\ <div class="progress">\ <div class="progress-bar"></div>\ </div>\ </div>'); } else { $data.queueItem = $(settings.itemTemplate); }

這樣就ok了，

以上即是個人填坑過程，相信不少人都會遇到，特此分享！

同時在這裏推薦另外兩款實用的多文件上傳控件，根據項目需求使用：

a、jQuery File Upload 官網：http://blueimp.github.com/jQuery-File-Upload/

b、百度的Web Uploader 官網：http://fex.baidu.com/webuploader/

Uploadify v3.2.1 參數說明

1、屬性

屬性名稱	默認值	說明
auto	true	設置爲true當選擇文件後就直接上傳了，爲false須要點擊上傳按鈕才上傳。
buttonClass	」	按鈕樣式
buttonCursor	‘hand’	鼠標指針懸停在按鈕上的樣子
buttonImage	null	瀏覽按鈕的圖片的路徑。
buttonText	‘SELECT FILES’	瀏覽按鈕的文本。
checkExisting	false	文件上傳重複性檢查程序，檢查即將上傳的文件在服務器端是否已存在，存在返回1，不存在返回0
debug	false	若是設置爲true則表示啓用SWFUpload的調試模式
fileObjName	‘Filedata’	文件上傳對象的名稱，若是命名爲’the_files’，PHP程序能夠用$_FILES['the_files']來處理上傳的文件對象。
fileSizeLimit	0	上傳文件的大小限制，若是爲整數型則表示以KB爲單位的大小，若是是字符串，則可使用(B, KB, MB, or GB)爲單位，好比’2MB’；若是設置爲0則表示無限制
fileTypeDesc	‘All Files’	這個屬性值必須設置fileTypeExts屬性後纔有效，用來設置選擇文件對話框中的提示文本，如設置fileTypeDesc爲「請選擇rar doc pdf文件」
fileTypeExts	‘.’	設置能夠選擇的文件的類型，格式如：’.doc;.pdf;*.rar’ 。
formData		JSON格式上傳每一個文件的同時提交到服務器的額外數據，可在’onUploadStart’事件中使用’settings’方法動態設置。
height	30	設置瀏覽按鈕的高度，默認值
itemTemplate	false	用於設置上傳隊列的HTML模版，可使用如下標籤： instanceID – Uploadify實例的ID fileID – 列隊中此文件的ID,或者理解爲此任務的ID fileName – 文件的名稱 fileSize – 當前上傳文件的大小插入模版標籤時使用格式如：${fileName}
method	Post	提交方式Post或Get
multi	true	設置爲true時能夠上傳多個文件。
overrideEvents		設置哪些事件能夠被重寫，JSON格式，如：’overrideEvents’ : ['onUploadProgress']
preventCaching	true	若是爲true，則每次上傳文件時自動加上一串隨機字符串參數，防止URL緩存影響上傳結果
progressData	‘percentage’	設置上傳進度顯示方式，percentage顯示上傳百分比，speed顯示上傳速度
queueID	false	設置上傳隊列容器DOM元素的ID，若是爲false則自動生成一個隊列容器。
queueSizeLimit	999	隊列最多顯示的任務數量，若是選擇的文件數量超出此限制，將會出發onSelectError事件。注意此項並不是最大文件上傳數量，若是要限制最大上傳文件數量，應設置uploadLimit。
removeCompleted	true	是否自動將已完成任務從隊列中刪除，若是設置爲false則會一直保留此任務顯示。
removeTimeout	3	若是設置了任務完成後自動從隊列中移除，則能夠規定從完成到被移除的時間間隔。
requeueErrors	false	若是設置爲true，則單個任務上傳失敗後將返回錯誤，並從新加入任務隊列上傳。
successTimeout	30	文件上傳成功後服務端應返回成功標誌，此項設置返回結果的超時時間
swf	‘uploadify.swf’	uploadify.swf 文件的相對路徑。
uploader	uploadify.php	後臺處理程序的相對路徑。
uploadLimit	999	最大上傳文件數量，若是達到或超出此限制將會觸發onUploadError事件。
width	120	設置文件瀏覽按鈕的寬度。

2、事件

事件名稱	說明
onCancel(file)	當點擊文件隊列中文件的關閉按鈕或點擊取消上傳時觸發，file參數爲被取消上傳的文件對象
onClearQueue(queueItemCount)	當調用函數cancel方法時觸發，queueItemCount參數爲被取消上傳的文件數量。
onDestroy()	當destory方法被調用時觸發
onDialogClose(queueData)	當文件瀏覽框關閉時觸發，若是將此事件被重寫，則當向隊列添加文件上傳出錯時不會彈出錯誤消息提示。 queueData對象包含以下屬性： filesSelected 文件選擇對話框中共選擇了多少個文件 filesQueued 已經向隊列中添加了多少個文件 filesReplaced 已經向隊列中替換了多少個文件 filesCancelled 取消了多少個文件 filesErrored 出錯了多少個文件
onDialogOpen()	當文件選擇對話框彈出時當即出發，但可能在文件選擇對話框被關閉以前並不能所有執行。
onDisable()	當disable方法禁用Uploadify上傳按鈕時被調用時觸發。
onEnable()	當disable方法啓用Uploadify上傳按鈕時被調用時觸發。
onFallback()	當Uploadify初始化過程當中檢測到當前瀏覽器不支持flash時觸發。
onInit()	首次初始化Uploadify結束時觸發。
onQueueComplete(queueData)	文件上傳隊列處理完畢後觸發。 queueData對象包含以下屬性： uploadsSuccessful – 上傳成功的文件數量 uploadsErrored – 上傳失敗的文件數量
onSelect(file)	選擇文件後向隊列中添加每一個上傳任務時都會觸發。
onSelectError(file, errorCode, errorMsg)	選擇文件後向隊列中添加每一個上傳任務時若是失敗都會觸發。 file – 文件對象 errorCode – 錯誤代碼以下： QUEUE_LIMIT_EXCEEDED – 任務數量超出隊列限制； FILE_EXCEEDS_SIZE_LIMIT – 文件大小超出限制； ZERO_BYTE_FILE – 文件大小爲0 INVALID_FILETYPE – 文件類型不符合要求 errorMsg – 錯誤提示，可經過’this.queueData.errorMsg’定製
onSWFReady()	Flash文件載入成功後觸發。
onUploadComplete(file)	每一個文件上傳完畢後不管成功與否都會觸發。
onUploadError(file, errorCode, errorMsg, errorString)	文件上傳出錯時觸發，參數由服務端程序返回。
onUploadProgress(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal)	處理上傳隊列的過程當中會屢次觸發此事件，每當任務狀態有更新時都會觸發。 file – 文件對象 bytesUploaded – 已上傳的字節數 bytesTotal – 文件總字節數 totalBytesUploaded – 當前任務隊列中所有文件已上傳的總字節數 totalBytesTotal – 當前任務隊列中所有文件的總字節數
onUploadStart(file)	當文件即將開始上傳時當即觸發
onUploadSuccess(file, data, response)	當文件上傳成功時觸發 file – 文件對象 data – 服務端輸出返回的信息 response – 有輸出時爲true,若是無響應爲false，若是返回的是false,當超過successTimeout設置的時間後假定爲true

3、方法

方法名稱	說明	應用舉例
cancel(fileID, suppressEvent)	取消隊列中的任務，無論此任務是否已經開始上傳 fileID – 要取消的文件ID，若是爲空則取消隊列中第一個任務，若是爲’*'則取消全部任務 suppressEvent – 是否阻止觸發onUploadCancel事件，當清空隊列時很是實用。	<a href="javascript:$(‘#file_upload’).uploadify(‘cancel’)">取消第一個</a> <a href="javascript:$(‘#file_upload’).uploadify(‘cancel’, ‘’)">清空隊列</a> <a href="javascript:$(‘#file_upload’).uploadify(‘upload’, ‘’)">開始上傳全部任務</a>
destroy()	銷燬Uploadify實例並將文件上傳按鈕恢復到原始狀態	<a href="javascript:$(‘#file_upload’).uploadify(‘destroy’)">銷燬Uploadify實例</a>
disable(setDisabled)	禁用或啓用文件瀏覽按鈕 setDisabled – 設置爲true表示禁用，false爲啓用	<a href="javascript:$(‘#file_upload’).uploadify(‘disable’, true)">禁用按鈕</a> <a href="javascript:$(‘#file_upload’).uploadify(‘disable’, false)">啓用按鈕</a>
settings(name, value, resetObjects)	獲取或設置Uploadify實例參數 name – 屬性名稱，若是隻提供屬性名稱則表示獲取其值 value – 屬性值 resetObjects – 設置爲true時，更新postData對象將清空現有的值。不然，新的值將被添加到其末尾。	$(‘#file_upload’).uploadify(‘settings’,'buttonText’,'BROWSE’); $(‘#file_upload’).uploadify(‘settings’,'buttonText’));
stop()	中止當前正在上傳的任務	<a href="javascript:$(‘#file_upload’).uploadify(‘upload’, ‘*’)">開始上傳</a> <a href="javascript:$(‘#file_upload’).uploadify(‘stop’)">中止上傳</a>
upload(fileID)	當即上傳指定的文件，若是fileID爲’*'表示上傳全部文件，要指定上傳多個文件，則將每一個文件的fileID做爲一個參數	<a href="javascript:$(‘#file_upload’).uploadify(‘upload’,'*’)">開始上傳所

原創文章，轉載請註明來自一個蘿蔔一個坑 -博客園[http://www.cnblogs.com/luozhihao]

本文地址：http://www.cnblogs.com/luozhihao/p/4959771.html

相關標籤/搜索