Uploadify是一款基於JQuery的優秀的文件/圖片上傳的插件,有基於Flash和HTML5兩種版本。
Uploadify/uploadifive主要特點有:
1. 多文件上傳
2. 個性化設置
3. 上傳進度條顯示
Uploadify/uploadifive主要特點有:
1. 多文件上傳
2. 個性化設置
3. 上傳進度條顯示
4. 拖拽上傳(HTML5版本)
部署
在部署一個Uploadify實例前,請確保滿足最低要求:
- 1.jQuery 1.4.x 或更高版本
- 2.Flash Player 9.0.24 或更高版本
- 3.支持PHP, ASP.Net, Cold Fusion的服務器環境(官方默認支持PHP)
下載最新版本的uploadify,解壓到服務器根目錄下的uploadify文件夾中,你可以看到以下文件:
- Change Log.txt(uploadify的升級日志,部署時刪掉)
- check-exists.php(用來檢查上傳目標文件夾里是否存在相同文件)
- index.php(官方實例)
- jquery.uploadify.js(上傳插件)
- jquery.uploadify.min.js(壓縮版的上傳插件,部署時使用)
- license.txt(許可證文件,部署時刪掉)
- uploadify.css(上傳控件樣式表)
- uploadify.php(上傳數據處理文件)
- uploadify.swf(flash基礎文件)
- uploadify-cancel.png(取消按鈕圖片)
在官方提供的實例文件中,是引用的jquery官方網站上的jquery庫,有需要的朋友還需要本地引用jquery庫。
下面我們看一看如何在你的項目上部署uploadify:
1.我們假定上傳控件部署在網站根目錄下的upload.
php中,uploadify文件夾位於網站根目錄中,上傳的文件保存在根目錄下的upload文件夾中,uploadify文件夾中包含check-exists.php、jquery.min.js 、jquery.uploadify.min.js、uploadify.css、uploadify.swf、uploadify-cancel.png。2.引用jquery庫
- <script type="text/javascript" src="/uploadify/jquery.min.js"></script>
3.引用uploadify腳本
- <script type="text/javascript" src="/uploadify /jquery.uploadify.min.js"></script>
4.引用uploadify樣式表
- <link rel="stylesheet" type="text/css" href="uploadify.css" />
5. 聲明一個普通的html文件上傳控件,並指定id
- <input id="file_upload" name="file_upload" type="file" multiple="true">
6. 將聲明的普通上傳控件與Uploadify插件綁定,並初始化
- <script type="text/javascript">
- $(function() {
- $(‘#file_upload‘).uploadify({
- ‘swf‘ : ‘/uploadify uploadify.swf‘, //指定上傳控件的主體文件
- ‘uploader‘ : ‘/uploadify uploadify.php‘ //指定服務器端上傳處理文件
- //其他配置項
- });
- });
- </script>