jquery uploadify 多文件上传插件 使用经验
2019獨角獸企業重金招聘Python工程師標準>>>
Uploadify 官網：http://www.uploadify.com/
一、如何使用呢？
官網原文：http://www.uploadify.com/documentation/uploadify/implementing-uploadify/
在我理解的基礎上，做了一些翻譯吧，建議直接看官網原文，因為截止到發布這篇博客為止，官方的版本是v3.2.1
使用之前我們來看下使用的最低要求。
要求
jQuery 1.4.x 或更新的版本
Flash Player 9.0.24 或更新的版本
服務器端實現文件上傳的功能（PHP、JAVA等），也就是需要配合服務器端實現使用。
使用
按照下面最基本的步驟來實現uploadify上傳功能
1、下載免費的 Uploadify Zip Package 安裝包
2、解壓并上傳以下文件到你網站上的一個文件夾（例如：/js/uploadify）
jquery.uploadify-3.1.min.js
uploadify.php （服務端處理上傳的文件）
uploadify.swf
uploadify.css
uploadify-cancel.png
check-exists.php
3、在前端頁面引用 jQuery JS庫
<script?src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>4、在jquery庫下面引用 Uploadify JS庫
<script?src="js/uploadify/jquery.uploadify-3.1.min.js"></script>5、布置上傳按鈕（可以是任意的標簽元素，只要確保ID的存在）
<input?type="file"?name="file_upload"?id="file_upload"?/>或是
<a?id="file_upload"?href="#">上傳</a>6、初始化 Uploadify JS代碼
$(function()?{$('#file_upload').uploadify({'swf'??????:?'/js/uploadify/uploadify.swf','uploader'?:?'/js/uploadify/uploadify.php'//?其他配置參數或方法}); });7、在文件頭部引入CSS文件，實現一些漂亮的顯示效果（也可以自己修改）
8、創建上傳文件夾
在你的服務器上創建上傳文件夾（例如：/uploads）并給它適當的權限（0755）
9、修改服務端上傳的文件
修改 uploadify.php 腳本使其上傳目錄為您創建的上傳目錄。
配套的 uploadify.php 腳本文件是不安全的，需要自己另外處理。
例如：如果你使用 CodeIgniter 框架的話，可以使用 上傳 類庫實現
10、看看 讓uploadify更安全 的文章
完成！
最后把前端的完成html貼出來
<!doctype?html> <html> <head> <meta?charset="utf-8"> <title>Uploadify?使用方法</title> <link?rel="stylesheet"?type="text/css"?href="/js/uploadify/uploadify.css"?/ </head> <body><input?type="file"?name="file_upload"?id="file_upload"?/><!--?引用jQuery?--> <script?src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <!--?引用Uploadify?--> <script?src="js/uploadify/jquery.uploadify-3.1.min.js"></script> <script> $(function()?{$('#file_upload').uploadify({'swf'??????:?'uploadify.swf','uploader'?:?'uploadify.php'//?Your?options?here}); }); </script> </body> </html>二、Uploadify 配置中文說明
1、選項
auto
類型: bool
默認: true
說明: 是否自動上傳
swf
類型: string
默認: 'uploadify.swf'
必須: Yes
說明: uploadify.swf 文件路徑，為了盡量避免問題的產生，建議使用相對于網站根目錄的路徑（盡管它也支持相當于當前目錄）
uploader
類型: string
默認: 'uploadify.php'
必須: Yes
說明: 服務端實現上傳功能的腳本文件路徑（相對于網站根目錄的路徑）
????? 自定義服務端上傳腳本：http://www.uploadify.com/documentation/uploadify/customizing-the-server-side-upload-script/
buttonClass
類型: string
默認: ''
必須: Yes
說明: 上傳按鈕添加額外的class
buttonCursor
類型:
默認:
說明:
buttonImage
類型: string
默認: null
說明: 上傳按鈕使用一張圖片代替
buttonText
類型: string
默認: 'SELECT FILES'
說明: 按鈕顯示的文字
checkExisting
類型: string
默認: false
說明: 上傳時檢查上傳的文件是否已存在，開啟的話，存在時返回1，不存在則返回0
debug
類型: bool
默認: false
說明: 是否開啟debug，開啟后會在body的結束處生成一段html，顯示 ---SWFUpload Instance Info---
fileObjName
類型: string
默認: 'Filedata'
說明: 表單中上傳字段的name值（<input type="file" name="Filedata" id="file_upload" />）
????? 例如: php上傳時 $_FILES['Filedata'] 獲取的 key 值
fileSizeLimit
類型: int | string
默認:
說明: 允許上傳的文件大小，如果設置為0表示不限制。該值允許為數字或字符串
????? 如果是字符串則后綴允許為(B, KB, MB, GB) 例如: 2MB
?? ?? 如果是數字則默認為KB
fileTypeDesc
類型: string
默認: 'All Files'
說明: 點擊上傳按鈕后，彈出的選擇窗口中的選擇文件類型的提示內容，如果設置為 'Any old file you want...'
fileTypeExts
類型: string
默認: '*.*'
說明: 允許上傳的文件后綴
????? 例如: '*.gif; *.jpg; *.jpeg; *.png'
formData
類型:
默認:
說明:
width
類型: int
默認: 120
說明: 按鈕顯示的寬度, 不能在后面使用 'px' , 改值僅可使用數字
height
類型: int
默認: 30
說明: 按鈕顯示的高度
itemTemplate
類型:
默認:
說明:
method
類型: string
默認: 'post'
說明: 上傳時的提交方式，該值僅可以是 'post' 或 'get'
multi
類型: bool
默認: true
說明: 是否開啟多文件上傳
overrideEvents
類型:
默認:
說明:
preventCaching
類型:
默認:
說明:
progressData
類型:
默認:
說明:
queueID
類型:
默認:
說明:
queueSizeLimit
類型:
默認:
說明:
removeCompleted
類型:
默認:
說明:
removeTimeout
類型:
默認:
說明:
requeueErrors
類型:
默認:
說明:
successTimeout
類型:
默認:
說明:
uploadLimit
類型:
默認:
說明:
三、我覺得必須要知道的Uploadify的事情
1、Uploadify 是使用Flash技術實現多文件上傳的，免費的
2、Uploadify 作者還出了一個使用HTML5技術實現的多文件上傳插件 UploadiFive ，但是收費（5刀）
3、Uploadify 自3.1起把 Uploadify 和 SWFUpload 合并成一個JS文件 jquery.uploadify-3.1.min.js
4、Uploadify 上傳提交到服務端時使用的方法不是 AJAX， 而是POST或GET，可通過 method 參數 配置，如果親知道如何使用AJAX請求提交麻煩告訴我哦
5、uploadify動態傳遞參數如何實現
等待補充
轉載于:https://my.oschina.net/u/205403/blog/360747
總結
以上是生活随笔為你收集整理的jquery uploadify 多文件上传插件 使用经验的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 篮球术语
- 下一篇： CentOS更换网卡设置