無論是做個人產品還是商業產品，一個好的用戶體驗必然給用戶留下比較深刻的影響，文件上傳功能就是必不可少的一個用戶體驗。

比如現在一個使用場景：

一個電子商城，用戶每次都要提交表單信息，每一次提交表單信息都會有一個10MB的附件，當用戶點擊提交按鈕后，就是滿滿無期的等待時間。

所以一般WEB1.0的網站也很注意，把上傳和普通表單提交分離了出來，但是這個并不能解決問題，然后我們又延伸出了AJAX提交表單的信息，當然這樣應該也很好了。

但是對于一個大的文件而已，不管怎么提交方式，用戶想要得到的是文件上傳的進度。比如QQ郵箱都是支持上傳附件顯示進度提示的。

最近偶然一次機會看到一個JQUERY版本的上傳插件uploadify,從官網下載了試用了下，配置很簡單，用戶界面也很友好，還支持多文件同時上傳

官方資料：

官網主頁：

http://www.uploadify.com/

相關配置參數：

http://www.uploadify.com/documentation/

?

默認下載是PHP版本的，部署到項目我做的步驟：

1.把上傳處理修改為自己項目的上傳處理（默認對文件格式沒有任何安全過濾，所以這個要注意一下）

?

配置使用：

樓主使用的是最新版本v2.1.4，參數和老版本有些不同，比如sizeLimit現在就是queuesizeLimit，在看到的一些配置不是最新的，樓主復制就拿來用，調試半天不行，悲劇啊 %>_<%

v2.1.4版本在Header部分加入:

<link href="/Public/javascript/uploadify/uploadify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="/Public/javascript/jquery.js"></script> <script type="text/javascript" src="/Public/javascript/uploadify/swfobject.js"></script> <script type="text/javascript" src="/Public/javascript/uploadify/jquery.uploadify.v2.1.4.min.js"></script> <script type="text/javascript"> $(document).ready(function() {$('#file_upload').uploadify({'uploader' : '/Public/javascript/uploadify/uploadify.swf', // 默認上傳主體文件'script' : '/Public/javascript/uploadify/uploadify.php', // 默認處理上傳文件'cancelImg' : '/Public/javascript/uploadify/cancel.png', // 取消上傳圖片'folder' : '/Data/', // 上傳到服務器的保存目錄,默認/'multi' : true, // 多文件上傳'simUplaodLimit' : 5, // 多文件上傳時候支持的最大文件數量型'queuesizeLimit' : 3, // 上傳文件大小控制'auto' : false, // 選定文件是否自動上傳'onCancel' : function(event,ID,fileObj,data){alert('The upload of ' + fileObj.name + ' has been canceled!');}}); }); </script>

Body加入:

<input id="file_upload" name="file_upload" type="file" /> <input type="button" name="upload" id="upload" value="uplaod files" οnclick="$('#file_upload').uploadifyUpload();"/>

支持中文：

在使用的時候發現一個錯誤提示是英文的，還有圖片默認是select imges,但是當你修改為"上傳文件'的時候，出來的是亂碼，原來是SWF默認轉換了編碼

解決方法：使用buttonImg屬性，用圖片代替按鈕文字，然后使用 wmode=transparent把圖片屬性修改為透明即可。

?

上傳完畢返回文件路徑：

/* ID The unique ID of the file queue item.fileObj An object containing the file information.[name] - The name of the uploaded file [filePath] - The path on the server to the uploaded file [size] – The size in bytes of the file [creationDate] – The date the file was created [modificationDate] – The last date the file was modified [type] – The file extension beginning with a ‘.’ response The text response sent back from the back-end upload script.data An object containing general data about the upload and the queue.[fileCount] - The number of files remaining in the queue [speed] - The average speed pf the file upload in KB/s */$('#file_upload').uploadify({'uploader' : '/uploadify/uploadify.swf','script' : '/uploadify/uploadify.php','cancelImg' : '/uploadify/cancel.png','folder' : '/uploads','multi' : true,'onComplete' : function(event, ID, fileObj, response, data) {alert('There are ' + data.fileCount + ' files remaining in the queue.');} });

　　

注意：

當設置multi:true的時候，設置simUploadLimit不應過多，因為無論你設置同時上傳幾個文件，它都會一個一個去請求并上傳，只是表面上感覺好像有多個線程同時在處理上傳請求一樣，只是表象而已。而且如果你把simUploadLimit設置過大就會經常出錯，我設置成5的時候經常會有一兩個文件上傳失敗。

?

配置參數一覽：

uploadify提供了常用配置參數、觸發事件和方法調用

?

Options:

auto: 自動上傳

buttonImg: 按鈕圖片，使用該屬性可以解決按鈕不支持中文功能

buttonText: 按鈕文字

cancellmg: 取消圖片

cancellmg: 取消圖片

checkScript:判斷上傳選擇的文件在服務器是否存在的后臺處理程序的相對路徑,無需修改

displayData:可是設置為上傳速度或者上傳百分比

expressInstall:沒有安裝FLASH調用的安裝程序，不用修改

fileDataName: 文件域的名稱

fileDesc: 點擊瀏覽的時候彈出框篩選的文件格式提示

fileExt:點擊瀏覽的時候彈出框篩選的文件格式如：(*.jpg,*.gif)

folder: 上傳保存文件，一般不用，我們會用自己的上傳程序處理

height: - 文件域高度

hideButton: 隱藏按鈕，通過CSS可設置另一個按鈕

method: 上傳方式(GET/POST)

multi:是否支持多文件上傳

queueID:唯一的ID號，多文件上傳不是線程上傳，會發送N個單獨的POST請求

queueSizeLimit: 同一個隊列的最大上傳數量

removeCompleted: 上傳成功后是否隱藏上傳隊列

rollover: 設置按鈕HOVER效果

script: 上傳服務端處理頁面，一般是自己項目的處理頁面

scriptAccess:FLASH的文件的訪問權限，本機測試可以修改為Always

scirptData: 提交表單的附帶參數

simUploadLimit: 上傳文件的最大數量?

sizeLimit:上傳文件大小控制

uploader: 上傳按鈕路徑

width: 文件域寬度

wmode: 使用該屬性可以使自己添加的圖片實現透明(wmode:transparent)

Events:

onAllComplete:所有上傳完成后調用

onCancel: 取消時候調用

onCheck: 檢測的時候調用

onClearQueue:清除上傳隊列時候調用

onComplete:單個完成調用

onError:出現錯誤調用

onOpen:當上傳開始時

onProgress: 每當上傳發生變化時

onInit:第一次加載時候

onQueueFull:隊列達到最大設置值時

onSelect:添加一個新隊列時

onSelectOnce:一個文件或者一組文件添加到隊列時

onSWFReady:當SWF文件加載完畢

Methods:

.uploadify() - 創建一個上傳，所以就支持頁面多個調用啦

.uploadifyCancel() - 取消上傳

.uploadClearQueue() - 清除已經選擇的附件

.uplaodSettings() - 設置配置參數，一般在初始化的時候就已經設置好了，不常用

.uplaodUpload() - 調用上傳,當auto =true的時候是會自動上傳的

?

在TP項目環境下配置上傳測試成功部分代碼：

?

'uploader'? : '/Public/javascript/uploadify/uploadify.swf', // 默認上傳主體文件
??? 'script'??? : '/Public/javascript/uploadify/uploadify.php', // 默認處理上傳文件
??? 'cancelImg' : '/Public/javascript/uploadify/cancel.png', // 取消上傳圖片
??? 'folder'??? : '/Data/', // 上傳到服務器的保存目錄,默認/
?? ?'multi'???? : true, // 多文件上傳
?? ?'simUplaodLimit' : 5, // 多文件上傳時候支持的最大文件數量型
?? ?'queuesizeLimit' : 3, // 上傳文件大小控制
??? 'auto'????? : false,? // 選定文件是否自動上傳
?? ?'onCancel'? : function(event,ID,fileObj,data){
?? ??? ?alert('The upload of ' + fileObj.name + ' has been canceled!');
?? ?}

轉載于:https://www.cnblogs.com/gaoxu387/archive/2011/10/24/2222753.html

總結

以上是生活随笔為你收集整理的基于JQUERY使用FLASH的AJAX上传进度条插件uploadify的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。