Uploadify的用法


從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);
        },//上傳成功后的方法


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM