無論是做Web產(chǎn)品還是Web項(xiàng)目，文件上傳是經(jīng)常要用到的功能。以前經(jīng)常聽到做項(xiàng)目的同事抱怨：“這款文件上傳控件功能強(qiáng)大但是用起來麻煩，最簡單的input上傳使用方便但是功能太簡單（例如不支持多文件），外觀也不盡如人意”。之后我一直留意網(wǎng)上的上傳控件，最近看到一款基于jquery的上傳插件Uploadify無論在功能、外觀、可用性和擴(kuò)展性上都有不錯(cuò)表現(xiàn)，于是研究了一番，介紹給大家。

簡介

Uploadify簡單說來，是基于Jquery的一款文件上傳插件。它的功能特色總結(jié)如下：

1. 支持單文件或多文件上傳，可控制并發(fā)上傳的文件數(shù)
2. 在服務(wù)器端支持各種語言與之配合使用，諸如PHP,.NET,Java……
3. 通過參數(shù)可配置上傳文件類型及大小限制
4. 通過參數(shù)可配置是否選擇文件后自動上傳
5. 易于擴(kuò)展，可控制每一步驟的回調(diào)函數(shù)（onSelect, onCancel……）
6. 通過接口參數(shù)和CSS控制外觀
7. 更多……

相關(guān)鏈接

Uploadify主頁地址：http://www.uploadify.com/ 在該頁面你可以了解到關(guān)于他的更多內(nèi)容。

Uploadify在線演示：在線Demo

Uploadify配置參數(shù)及接口文檔：http://www.uploadify.com/documentation

Uploadify插件下載地址：http://www.uploadify.com/download

使用方法

1.下載插件安裝包后，可以看到里面的幾個(gè)主要文件：jquery.uploadify.js（完成上傳功能的腳本文件，在調(diào)用頁面引用）、uploadify.css（外觀樣式表）、uploader.swf（上傳控件的主體文件，flash控件）、upload.php（服務(wù)器端處理文件，官方僅提供了php版的）

2.引用了插件文件后，在頁面中做如下調(diào)用：

//聲明一個(gè)普通的html文件上傳控件，并指定id<input type="file" name="fileInput" id="fileInput" /> 

//將聲明的普通上傳控件與Uploadify插件綁定  
<script type="text/javascript"> 
$(document).ready(function() {  
$('#fileInput').fileUpload ({  
//以下參數(shù)均是可選  
'uploader'  : 'uploader.swf',   //指定上傳控件的主體文件，默認(rèn)‘uploader.swf’  
'script'    : 'upload.php',       //指定服務(wù)器端上傳處理文件，默認(rèn)‘upload.php’  
'cancelImg' : 'cancel.png',   //指定取消上傳的圖片，默認(rèn)‘cancel.png’  
'auto'      : true,               //選定文件后是否自動上傳，默認(rèn)false  
'folder'    : '/uploads'         //要上傳到的服務(wù)器路徑，默認(rèn)‘/’  
'multi'     : true,               //是否允許同時(shí)上傳多文件，默認(rèn)false  
'fileDesc' : 'rar文件或zip文件'  //出現(xiàn)在上傳對話框中的文件類型描述  
'fileExt'   : '*.rar;*.zip',      //控制可上傳文件的擴(kuò)展名，啟用本項(xiàng)時(shí)需同時(shí)聲明fileDesc  
'sizeLimit': 86400           //控制上傳文件的大小，單位byte  
'simUploadLimit' :5         //多文件上傳時(shí)，同時(shí)上傳文件數(shù)目限制  
});  
});  
</script> 
   
上面列出了我認(rèn)為常用的配置選項(xiàng)，此外還有很多參數(shù)可配置，參考官方文檔 

3.通過調(diào)用相關(guān)功能函數(shù)，聲明功能按鈕。
例如聲明上傳功能按鈕（自動上傳時(shí)不需要）：

<a href="javascript:$('#fileInput').fileUploadStart();">上傳文件</a> 

<a href="javascript:$('#fileInput').fileUploadClearQueue();">取消上傳隊(duì)列</a> 

其它說明

官方只提供了php版本的服務(wù)器端處理文件，由于我平時(shí)的工作使用.net，下面提供一個(gè)我寫的.NET C#版的處理文件：
點(diǎn)擊下載C#版處理文件

原文鏈接：http://kb.cnblogs.com/page/53693/

【小編推薦】

1.使用jQuery設(shè)計(jì)數(shù)據(jù)表格之設(shè)計(jì)表格基類

2.jQuery設(shè)計(jì)思想

3.20個(gè)最新jQuery插件震撼登場（多圖）

4.jQuery中10個(gè)強(qiáng)大的遍歷函數(shù)

5.jQuery實(shí)現(xiàn)表格數(shù)據(jù)的動態(tài)添加與統(tǒng)計(jì)