uploadify這個插件是基於js里面的jquery庫寫的。結合了ajax和flash，實現了這個多線程上傳的功能。
現在最新版為3.2.1。
在線實例
實例預覽 Uploadify 在線實例Demo演示
實例中用到的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("' + json.file + '")">刪除</a>';
- $imgHtml += '</span>';
- $($imgHtml).appendTo('#uploadfiles');
- } else {
- alert(json.message);
- }
- },
- 'onQueueComplete': function() {
- $('.upload_load').remove();
- }
- });
- });
- </script>
復制
參數說明
| 屬性名稱 | 默認值 | 說明 |
| 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 | 設置文件瀏覽按鈕的寬度。 |
| 事件名稱 | 說明 |
| onCancel(file) | 當點擊文件隊列中文件的關閉按鈕或點擊取消上傳時觸發，file參數為被取消上傳的文件對象 |
| onClearQueue(queueItemCount) | 當調用函數cancel方法時觸發，queueItemCount參數為被取消上傳的文件數量。 |
| onDestroy() | 當destory方法被調用時觸發 |
| onDialogClose(queueData) | 當文件瀏覽框關閉時觸發，如果將此事件被重寫，則當向隊列添加文件上傳出錯時不會彈出錯誤消息提示。 queueData對象包含如下屬性：
|
| onDialogOpen() | 當文件選擇對話框彈出時立即出發，但可能在文件選擇對話框被關閉之前並不能全部執行。 |
| onDisable() | 當disable方法禁用Uploadify上傳按鈕時被調用時觸發。 |
| onEnable() | 當disable方法啟用Uploadify上傳按鈕時被調用時觸發。 |
| onFallback() | 當Uploadify初始化過程中檢測到當前瀏覽器不支持flash時觸發。 |
| onInit() | 首次初始化Uploadify結束時觸發。 |
| onQueueComplete(queueData) | 文件上傳隊列處理完畢后觸發。 queueData對象包含如下屬性：
|
| onSelect(file) | 選擇文件后向隊列中添加每個上傳任務時都會觸發。 |
| onSelectError(file, errorCode, errorMsg) | 選擇文件后向隊列中添加每個上傳任務時如果失敗都會觸發。 file – 文件對象 errorCode – 錯誤代碼如下：
errorMsg – 錯誤提示，可通過’this.queueData.errorMsg’定制 |
| onSWFReady() | Flash文件載入成功后觸發。 |
| onUploadComplete(file) | 每個文件上傳完畢后無論成功與否都會觸發。 |
| onUploadError(file, errorCode, errorMsg, errorString) | 文件上傳出錯時觸發，參數由服務端程序返回。 |
| onUploadProgress(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) | 處理上傳隊列的過程中會多次觸發此事件，每當任務狀態有更新時都會觸發。
|
| onUploadStart(file) | 當文件即將開始上傳時立即觸發 |
| onUploadSuccess(file, data, response) | 當文件上傳成功時觸發
|
| 方法名稱 | 說明 | 應用舉例 |
| cancel(fileID, suppressEvent) | 取消隊列中的任務，不管此任務是否已經開始上傳
|
復制
|
| destroy() | 銷毀Uploadify實例並將文件上傳按鈕恢復到原始狀態 |
復制
|
| disable(setDisabled) | 禁用或啟用文件瀏覽按鈕 setDisabled – 設置為true表示禁用，false為啟用 |
復制
|
| settings(name, value, resetObjects) | 獲取或設置Uploadify實例參數
|
復制
|
| stop() | 停止當前正在上傳的任務 |
復制
|
| upload(fileID) | 立即上傳指定的文件，如果fileID為’*'表示上傳所有文件，要指定上傳多個文件，則將每個文件的fileID作為一個參數 |
復制
|