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

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

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

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

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

在線實(shí)例

實(shí)例中用到的php文件UploaderDemo.php請(qǐng)?jiān)陧撁嫦路较螺d

引入文件

<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ù)說明

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

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

**三、方法**
方法名稱	說明	應(yīng)用舉例
cancel(fileID, suppressEvent)	取消隊(duì)列中的任務(wù)，不管此任務(wù)是否已經(jīng)開始上傳 fileID – 要取消的文件ID，如果為空則取消隊(duì)列中第一個(gè)任務(wù)，如果為'*'則取消所有任務(wù) suppressEvent – 是否阻止觸發(fā)onUploadCancel事件，當(dāng)清空隊(duì)列時(shí)非常實(shí)用。	<ahref="javascript:$(‘#file_upload').uploadify(‘cancel')"> 取消第一個(gè)</a> <a href="javascript:$(‘#file_upload').uploadify(‘cancel', ‘')">清空隊(duì)列</a> <a href="javascript:$(‘#file_upload').uploadify(‘upload', ‘')">開始上傳所有任務(wù)</a>
destroy()	銷毀Uploadify實(shí)例并將文件上傳按鈕恢復(fù)到原始狀態(tài)	<a href="javascript:$(‘#file_upload').uploadify(‘destroy')"> 銷毀Uploadify實(shí)例</a>
disable(setDisabled)	禁用或啟用文件瀏覽按鈕 setDisabled – 設(shè)置為true表示禁用，false為啟用	<a href="javascript:$(‘#file_upload').uploadify(‘disable', true)">禁用按鈕</a> <a href="javascript:$(‘#file_upload').uploadify(‘disable', false)">啟用按鈕</a>
settings(name, value, resetObjects)	獲取或設(shè)置Uploadify實(shí)例參數(shù) name – 屬性名稱，如果只提供屬性名稱則表示獲取其值 value – 屬性值 resetObjects – 設(shè)置為true時(shí)，更新postData對(duì)象將清空現(xiàn)有的值。否則，新的值將被添加到其末尾。	$(‘#file_upload').uploadify(‘settings','buttonText','BROWSE'); $(‘#file_upload').uploadify(‘settings','buttonText'));
stop()	停止當(dāng)前正在上傳的任務(wù)	<a href="javascript:$(‘#file_upload').uploadify(‘upload', ‘*')">開始上傳</a> <a href="javascript:$(‘#file_upload').uploadify(‘stop')"> 停止上傳</a>
upload(fileID)	立即上傳指定的文件，如果fileID為'*'表示上傳所有文件，要指定上傳多個(gè)文件，則將每個(gè)文件的fileID作為一個(gè)參數(shù)	<a href="javascript:$(‘#file_upload').uploadify(‘upload','*')"> 開始上傳所有文</a>