從Uploadify 的下載頁面上,可以看到當前的版本已經是Uploadify-v3.0.0 (Beta),但是還是一個Beta版,所以目前來說網站上的文檔主要是針對 uploadify v2.14 的。所以這里就不多介紹老版本的文檔了,主要說一下Uploadify3.0 的一些用法。
Uploadify 的v3.0 和老版本還是有很大的差別的,雖然從演示上來看基本上一樣,但是jquery調用uploadify的時候,一些很重要的參數名字都變了。在演示上的差 別,老版本是把按鈕的樣式放在flash里,而v3.0把按鈕的樣式和flash 分開了,定義起來更加自由。
下面來說一下v3.0 的使用方法和有哪些參數上變化:
使用方法:
<html>
<head>
<link href="/uploadify/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/uploadify/jquery-1.5.1.js"></script>
<script type="text/javascript" src="/uploadify/swfobject.js"></script>
<script type="text/javascript" src="/uploadify/jquery.uploadify.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#file_upload').uploadify({
'uploader' : '/uploadify/uploadify.php',
'swf' : '/uploadify/uploadify.swf',
'cancelImage' : '/uploadify/uploadify-cancel.png',
'auto' : true
});
});
</script>
</head>
<body>
<input id="file_upload" name="file_upload" type="file" />
</body>
</html>
在頁面中首先要uploadify 依賴的兩個js 庫:jquery 和 swfobject, 然后再加入從網上下載的 jquery.uploadify.js。 到目前為止,准備工作已經就緒,下面開始使用 jQuery.uploadify() 函數。傳入指定的參數后,uploadify 就會按照你的要求來工作了。
UPLOADIFY V3.0的參數詳解
下面的參數參數是必須的,當然插件也已經給他們賦上了必要的默認值
id : jQuery(this).attr('id'), // 根據頁面上綁定的對象來給uploadify設置id
swf : 'uploadify.swf', // uploadify的上傳功能是通過flash 來實現的,swf 是用來設置這個flash 的位置,這個flash 可以在下載的插件包里找到
uploader : 'uploadify.php', // 這個參數是當文件上傳完以后調用的PHP代碼的地址
下面的參數是可選的
// Options
auto : false, // 設置選完文件是否自動上傳
buttonClass : '', // 可以為按鈕自定義樣式
buttonCursor : 'hand', // 設置檔鼠標移動到flash 上顯示的圖標
buttonImage : '1111.jpg', // 設置按鈕的圖片
buttonText : 'SELECT FILES', // 設置按鈕上顯示的文本
cancelImage : 'uploadify-cancel.png', // 設置取消按鈕的圖片
checkExisting : 'uploadify-check-existing.php', // 檢查上傳的文件時候已經存在
debug : false, // uploadify de調試程序是否開啟
fileObjName : 'Filedata',
fileSizeLimit : 0, // 設置文件的上傳的大小,0為無窮大
fileTypeDesc : 'All Files (*.*)',
fileTypeExts : '*.*', // 設置文件上傳時的文件類型
height : 30, // 設置flash 的高度
method : 'post', // 設置提交的方法
multi : false, // 是否支付多文件一起上傳
queueID : false, //
queueSizeLimit : 999,
removeCompleted : true,
removeTimeout : 3,
requeueErrors : false,
postData : {}, // 設置上傳是需要傳入的參數
preventCaching : true,
progressData : 'percentage',
// simUploadLimit : 1, // Not possible with swfUpload
successTimeout : 30,
transparent : true,
uploadLimit : 999,
uploaderType : 'html5', // the other option is 'flash' // 設置上傳組件的類型
width : 120, // 設置flash 的高度
'onSelect': function(file)
{
alert(file.name+"---"+file.id);
},// 選擇文件時觸發的方法
'onUploadError' : function(file, errorCode, errorMsg, errorString) {
alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
},//上傳出錯后的方法
'onUploadSuccess' : function(file, data, response) {
alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
},//上傳成功后的方法