詳解jQuery uploadify文件上傳插件的使用方法

更新時間：2016年12月16日 15:07:42 作者：285267128

本文主要介紹了jQuery uploadify文件上傳插件的使用方法，uploadify這個插件是基于js里面的jquery庫寫的。結合了ajax和flash，實現(xiàn)了這個多線程上傳的功能。具有很好的參考價值，需要的朋友一起來看下吧

uploadify這個插件是基于js里面的jquery庫寫的。結合了ajax和flash，實現(xiàn)了這個多線程上傳的功能。

現(xiàn)在最新版為3.2.1。

在線實例

實例中用到的php文件UploaderDemo.php請在頁面下方下載

引入文件

<link rel="stylesheet" type="text/css" href="uploadify.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.uploadify.js"></script>

使用方法

 <form>
 <div id="queue"></div>
 <input id="file_upload" name="file_upload" type="file" multiple="true">
 </form>
 <div id="uploadfiles"></div> 
<div id="fileQueue" style="clear:both"></div>
<script type="text/javascript">
var timestamp = new Date().getTime();
var token = Math.floor(Math.random() * 1000) + timestamp;
$(function() {
 $('#file_upload').uploadify({
 'buttonText': '選擇文件..',
 'fileObjName': 'simplefile',
 'method': 'post',
 'multi': true,
 'queueID': 'fileQueue',
 //'uploadLimit': 2,
 'fileTypeExts': '*.gif;*.png;*.jpg;*.bmp;*.jpeg;',
 'buttonImage': '/static/js/uploadify/select.png',
 'formData': {
 'timestamp': timestamp,
 'token': token
 },
 'swf': '/static/js/uploadify/uploadify.swf',
 'uploader': '/static/php/UploaderDemo.php',
 'onUploadStart': function() {
 $imgHtml = '<img class="upload_load" src="/static/images/upload.gif" align="absmiddle" />';
 $('#uploadfiles').append($imgHtml);
 },
 'onUploadSuccess': function(file, data, response) {
 $('.upload_load').remove();
 var json = $.parseJSON(data);
 if (json.state == 'success') {
 $imgHtml = '<span id="file_' + json.file_id + '">';
 $imgHtml += '<a href="' + json.file + '" target="_blank">';
 $imgHtml += '<img src="' + json.file + '" width="100" height="100" align="absmiddle"/>';
 $imgHtml += '</a>';
 $imgHtml += '<a href="javascript:uploadifyRemove(&quot;' + json.file + '&quot;)">刪除</a>';
 $imgHtml += '</span>';
 $($imgHtml).appendTo('#uploadfiles');
 } else {
 alert(json.message);
 }
 },
 'onQueueComplete': function() {
 $('.upload_load').remove();
 }
 });
}); 
</script>

參數(shù)說明

**一、屬性**
屬性名稱	默認值	說明
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	上傳文件的大小限制，如果為整數(shù)型則表示以KB為單位的大小，如果是字符串，則可以使用(B, KB, MB, or GB)為單位，比如'2MB'；如果設置為0則表示無限制
fileTypeDesc	‘All Files'	這個屬性值必須設置fileTypeExts屬性后才有效，用來設置選擇文件對話框中的提示文本，如設置fileTypeDesc為“請選擇rar doc pdf文件”
fileTypeExts	‘.'	設置可以選擇的文件的類型，格式如：'.doc;.pdf;*.rar' 。
formData		JSON格式上傳每個文件的同時提交到服務器的額外數(shù)據(jù)，可在'onUploadStart'事件中使用'settings'方法動態(tài)設置。
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，則每次上傳文件時自動加上一串隨機字符串參數(shù)，防止URL緩存影響上傳結果
progressData	‘percentage'	設置上傳進度顯示方式，percentage顯示上傳百分比，speed顯示上傳速度
queueID	false	設置上傳隊列容器DOM元素的ID，如果為false則自動生成一個隊列容器。
queueSizeLimit	999	隊列最多顯示的任務數(shù)量，如果選擇的文件數(shù)量超出此限制，將會出發(fā)onSelectError事件。注意此項并非最大文件上傳數(shù)量，如果要限制最大上傳文件數(shù)量，應設置uploadLimit。
removeCompleted	true	是否自動將已完成任務從隊列中刪除，如果設置為false則會一直保留此任務顯示。
removeTimeout	3	如果設置了任務完成后自動從隊列中移除，則可以規(guī)定從完成到被移除的時間間隔。
requeueErrors	false	如果設置為true，則單個任務上傳失敗后將返回錯誤，并重新加入任務隊列上傳。
successTimeout	30	文件上傳成功后服務端應返回成功標志，此項設置返回結果的超時時間
swf	‘uploadify.swf'	uploadify.swf 文件的相對路徑。
uploader	uploadify.php	后臺處理程序的相對路徑。
uploadLimit	999	最大上傳文件數(shù)量，如果達到或超出此限制將會觸發(fā)onUploadError事件。
width	120	設置文件瀏覽按鈕的寬度。

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

**三、方法**
方法名稱	說明	應用舉例
cancel(fileID, suppressEvent)	取消隊列中的任務，不管此任務是否已經(jīng)開始上傳 fileID – 要取消的文件ID，如果為空則取消隊列中第一個任務，如果為'*'則取消所有任務 suppressEvent – 是否阻止觸發(fā)onUploadCancel事件，當清空隊列時非常實用。	<ahref="javascript:$(‘#file_upload').uploadify(‘cancel')"> 取消第一個</a> <a href="javascript:$(‘#file_upload').uploadify(‘cancel', ‘')">清空隊列</a> <a href="javascript:$(‘#file_upload').uploadify(‘upload', ‘')">開始上傳所有任務</a>
destroy()	銷毀Uploadify實例并將文件上傳按鈕恢復到原始狀態(tài)	<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實例參數(shù) name – 屬性名稱，如果只提供屬性名稱則表示獲取其值 value – 屬性值 resetObjects – 設置為true時，更新postData對象將清空現(xiàn)有的值。否則，新的值將被添加到其末尾。	$(‘#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作為一個參數(shù)	<a href="javascript:$(‘#file_upload').uploadify(‘upload','*')"> 開始上傳所有文</a>