詳解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請?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("' + json.file + '")">刪除</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' | 文件上傳對象的名稱，如果命名為'the_files'，PHP程序可以用$_FILES['the_files']來處理上傳的文件對象。 |
| fileSizeLimit | 0 |
上傳文件的大小限制 ，如果為整數(shù)型則表示以KB為單位的大小，如果是字符串，則可以使用(B, KB, MB, or GB)為單位，比如'2MB'； 如果設(shè)置為0則表示無限制 |
| fileTypeDesc | ‘All Files' | 這個(gè)屬性值必須設(shè)置fileTypeExts屬性后才有效，用來設(shè)置選擇文件對話框中的提示文本，如設(shè)置fileTypeDesc為“請選擇rar doc pdf文件” |
| fileTypeExts | ‘*.*' | 設(shè)置可以選擇的文件的類型，格式如：'*.doc;*.pdf;*.rar' 。 |
| formData | JSON格式上傳每個(gè)文件的同時(shí)提交到服務(wù)器的額外數(shù)據(jù)，可在'onUploadStart'事件中使用'settings'方法動態(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í)自動加上一串隨機(jī)字符串參數(shù)，防止URL緩存影響上傳結(jié)果 |
| progressData | ‘percentage' | 設(shè)置上傳進(jìn)度顯示方式，percentage顯示上傳百分比，speed顯示上傳速度 |
| queueID | false | 設(shè)置上傳隊(duì)列容器DOM元素的ID，如果為false則自動生成一個(gè)隊(duì)列容器。 |
| queueSizeLimit | 999 | 隊(duì)列最多顯示的任務(wù)數(shù)量，如果選擇的文件數(shù)量超出此限制，將會出發(fā)onSelectError事件。 注意此項(xiàng)并非最大文件上傳數(shù)量，如果要限制最大上傳文件數(shù)量，應(yīng)設(shè)置uploadLimit。 |
| removeCompleted | true | 是否自動將已完成任務(wù)從隊(duì)列中刪除，如果設(shè)置為false則會一直保留此任務(wù)顯示。 |
| removeTimeout | 3 | 如果設(shè)置了任務(wù)完成后自動從隊(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 文件的相對路徑。 |
| uploader | uploadify.php | 后臺處理程序的相對路徑。 |
| uploadLimit | 999 | 最大上傳文件數(shù)量，如果達(dá)到或超出此限制將會觸發(fā)onUploadError事件。 |
| width | 120 | 設(shè)置文件瀏覽按鈕的寬度。 |
| 事件名稱 | 說明 |
| onCancel(file) |
當(dāng)點(diǎn)擊文件隊(duì)列中文件的關(guān)閉按鈕或點(diǎn)擊取消上傳時(shí)觸發(fā)，file參數(shù)為被取消上傳的文件對象 |
| 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í)不會彈出錯(cuò)誤消息提示。 queueData對象包含如下屬性：
|
| onDialogOpen() | 當(dāng)文件選擇對話框彈出時(shí)立即出發(fā)，但可能在文件選擇對話框被關(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對象包含如下屬性：
|
| onSelect(file) |
選擇文件后向隊(duì)列中添加每個(gè)上傳任務(wù)時(shí)都會觸發(fā)。 |
| onSelectError(file, errorCode, errorMsg) |
選擇文件后向隊(duì)列中添加每個(gè)上傳任務(wù)時(shí)如果失敗都會觸發(fā)。 file – 文件對象 errorCode – 錯(cuò)誤代碼如下：
errorMsg – 錯(cuò)誤提示，可通過'this.queueData.errorMsg'定制 |
| onSWFReady() | Flash文件載入成功后觸發(fā)。 |
| onUploadComplete(file) | 每個(gè)文件上傳完畢后無論成功與否都會觸發(fā)。 |
| onUploadError(file, errorCode, errorMsg, errorString) | 文件上傳出錯(cuò)時(shí)觸發(fā)，參數(shù)由服務(wù)端程序返回。 |
| onUploadProgress(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) |
處理上傳隊(duì)列的過程中會多次觸發(fā)此事件，每當(dāng)任務(wù)狀態(tài)有更新時(shí)都會觸發(fā)。
|
| onUploadStart(file) | 當(dāng)文件即將開始上傳時(shí)立即觸發(fā) |
| onUploadSuccess(file, data, response) |
當(dāng)文件上傳成功時(shí)觸發(fā)
|
| 方法名稱 | 說明 | 應(yīng)用舉例 |
| cancel(fileID, suppressEvent) |
取消隊(duì)列中的任務(wù)，不管此任務(wù)是否已經(jīng)開始上傳
|
|
| destroy() | 銷毀Uploadify實(shí)例并將文件上傳按鈕恢復(fù)到原始狀態(tài) |
|
| disable(setDisabled) |
禁用或啟用文件瀏覽按鈕 setDisabled – 設(shè)置為true表示禁用，false為啟用 |
|
| settings(name, value, resetObjects) |
獲取或設(shè)置Uploadify實(shí)例參數(shù)
|
|
| stop() | 停止當(dāng)前正在上傳的任務(wù) |
|
| upload(fileID) | 立即上傳指定的文件，如果fileID為'*'表示上傳所有文件，要指定上傳多個(gè)文件，則將每個(gè)文件的fileID作為一個(gè)參數(shù) |
|
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
- Javascript使用uploadify來實(shí)現(xiàn)多文件上傳
- uploadify java實(shí)現(xiàn)多文件上傳和預(yù)覽
- jQuery.uploadify文件上傳組件實(shí)例講解
- jQuery文件上傳控件 Uploadify 詳解
- ASP.NET多文件上傳控件Uploadify的使用方法
- ASP.NET文件上傳控件Uploadify的使用方法
- uploadify多文件上傳參數(shù)設(shè)置技巧
- php+jQuery.uploadify實(shí)現(xiàn)文件上傳教程
- jQuery文件上傳插件Uploadify使用指南
- JavaScript Uploadify文件上傳實(shí)例
相關(guān)文章
js整數(shù)字符串轉(zhuǎn)換為金額類型數(shù)據(jù)(示例代碼)
本篇文章主要是對js整數(shù)字符串轉(zhuǎn)換為金額類型數(shù)據(jù)的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
本篇文章主要分享的是幾個(gè)上傳文件的例子和邏輯步奏及自定義個(gè)簡單的js上傳插件。具有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
ajax jquery實(shí)現(xiàn)頁面某一個(gè)div的刷新效果
這篇文章主要給大家介紹了關(guān)于ajax jquery實(shí)現(xiàn)頁面某一個(gè)div的刷新效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了jquery html5 視頻播放控制代碼,需要的朋友可以參考下2016-11-11
cnblogs TagCloud基于jquery的實(shí)現(xiàn)代碼
自創(chuàng)"山寨版"的"博客園"TagCloud!...2010-06-06
Jquery 一次處理多個(gè)ajax請求的代碼，需要的朋友可以參考下。2011-09-09
這篇文章主要介紹了jQuery取得iframe中元素的常用方法,結(jié)合實(shí)例形式詳細(xì)分析了jQuery針對iframe中元素獲取技巧及注意事項(xiàng),需要的朋友可以參考下2016-01-01
jquery重復(fù)提交請求一般來說有兩個(gè)原因，一是沒有取消綁定；二是多次引用同一個(gè)js文件2014-05-05
jquery的ajaxSubmit()異步上傳圖片并保存表單數(shù)據(jù)演示代碼
使用jquery的ajaxSubmit()異步上傳圖片的捅死實(shí)現(xiàn)保存表單數(shù)據(jù)，具體演示代碼如下,感興趣的朋友可以參考下哈，希望對大家有所幫助2013-06-06
JQuery獲取或設(shè)置ckeditor的數(shù)據(jù)(示例代碼)
JQuery獲取或設(shè)置ckeditor的數(shù)據(jù)(示例代碼)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11