DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery文件上傳插件Uploadify使用指南
jQuery文件上傳插件Uploadify使用指南
編輯:JQuery特效代碼     

對於HTML5版本會比較好的支持手機浏覽器,避免蘋果手機Safari浏覽器不支持
Flash,主要特性:支持多文件上傳、HTML5版本可拖拽上傳、實時上傳進度條顯示、強大的參數
定制功能,如文件大小、文件類型、按鈕圖片定義、上傳文件腳本等。

Flash版本使用方法:
1.加載JS和CSS

. 代碼如下: 
<script src="jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css">

2.編寫HTML內容

. 代碼如下:
<form>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="true">
</form>


3.函數調用

. 代碼如下:
<script type="text/javascript">
        $(document).ready(function()
        {
            $("#file_upload").uploadify({
                'uploader': 'uploadify.swf',
                'script': 'UploadHandler.php',               
                'folder': 'UploadFile',
                'queueID': 'fileQueue',
                'auto': true,
                'multi': true
            });
        }); 
</script>

4.更多參數配置詳解

uploader : uploadify.swf 文件的相對路徑,該swf文件是一個帶有文字BROWSE的按鈕,點擊後淡出
打開文件對話框,默認值:uploadify.swf。
script :   後台處理程序的相對路徑 。默認值:uploadify.php
checkScript :用來判斷上傳選擇的文件在服務器是否存在的後台處理程序的相對路徑
fileDataName :設置一個名字,在服務器處理程序中根據該名字來取上傳文件的數據。默認為Filedata
method : 提交方式Post 或Get 默認為Post
scriptAccess :flash腳本文件的訪問模式,如果在本地測試設置為always,默認值:sameDomain 
folder :  上傳文件存放的目錄 。
queueID : 文件隊列的ID,該ID與存放文件隊列的div的ID一致。
queueSizeLimit : 當允許多文件生成時,設置選擇文件的個數,默認值:999 。
multi : 設置為true時可以上傳多個文件。
auto : 設置為true當選擇文件後就直接上傳了,為false需要點擊上傳按鈕才上傳 。
fileDesc : 這個屬性值必須設置fileExt屬性後才有效,用來設置選擇文件對話框中的提示文本,如設
置fileDesc為“請選擇rar doc pdf文件”
fileExt : 設置可以選擇的文件的類型,格式如:'*.doc;*.pdf;*.rar' 。
sizeLimit : 上傳文件的大小限制 。
simUploadLimit : 允許同時上傳的個數 默認值:1 。
buttonText : 浏覽按鈕的文本,默認值:BROWSE 。
buttonImg : 浏覽按鈕的圖片的路徑 。
hideButton : 設置為true則隱藏浏覽按鈕的圖片 。
rollover : 值為true和false,設置為true時當鼠標移到浏覽按鈕上時有反轉效果。
width : 設置浏覽按鈕的寬度 ,默認值:110。
height : 設置浏覽按鈕的高度 ,默認值:30。
wmode : 設置該項為transparent 可以使浏覽按鈕的flash背景文件透明,並且flash文件會被置為頁
面的最高層。 默認值:opaque 。
cancelImg :選擇文件到文件隊列中後的每一個文件上的關閉按鈕圖標

上面介紹的key值的value都為字符串或是布爾類型,比較簡單,接下來要介紹的key值的value為一個函數,可以在選擇文件、出錯或其他一些操作的時候返回一些信息給用戶。

onInit : 做一些初始化的工作
onSelect :選擇文件時觸發,該函數有三個參數
event:事件對象。
queueID:文件的唯一標識,由6為隨機字符組成。
fileObj:選擇的文件對象,有name、size、creationDate、modificationDate、type 5個屬性。
代碼如下:

. 代碼如下: 
<script type="text/javascript">
$(document).ready(function()
{
    $("#uploadify").uploadify({
        'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',
        'script': 'UploadHandler.ashx',
        'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
        'folder': 'UploadFile',
        'queueID': 'fileQueue',
        'auto': false,
        'multi': true,
        'onInit':function(){alert("1");},
        'onSelect': function(e, queueId, fileObj)
        {
            alert("唯一標識:" + queueId + "\r\n" +
                  "文件名:" + fileObj.name + "\r\n" +
                  "文件大小:" + fileObj.size + "\r\n" +
                  "創建時間:" + fileObj.creationDate + "\r\n" +
                  "最後修改時間:" + fileObj.modificationDate + "\r\n" +
                  "文件類型:" + fileObj.type
            );

        }
    });
});
</script>

  
onSelectOnce :在單文件或多文件上傳時,選擇文件時觸發。該函數有兩個參數event,data,data對象
有以下幾個屬性:
fileCount:選擇文件的總數。
filesSelected:同時選擇文件的個數,如果一次選擇了3個文件該屬性值為3。
filesReplaced:如果文件隊列中已經存在A和B兩個文件,再次選擇文件時又選擇了A和B,該屬性值為2。
allBytesTotal:所有選擇的文件的總大小。
onCancel: 當點擊文件隊列中文件的關閉按鈕或點擊取消上傳時觸發。該函數有event、queueId、fileObj、
data四個參數,前三個參數同onSelect 中的三個參數,data對象有兩個屬性fileCount和allBytesTotal。
fileCount:取消一個文件後,文件隊列中剩余文件的個數。
allBytesTotal:取消一個文件後,文件隊列中剩余文件的大小。

onClearQueue :當調用函數fileUploadClearQueue時觸發。有event和data兩個參數,同onCancel 中的兩個對應參數。
onQueueFull :當設置了queueSizeLimit並且選擇的文件個數超出了queueSizeLimit的值時觸發。該函數有兩個
參數event和queueSizeLimit。
onError :當上傳過程中發生錯誤時觸發。該函數有event、queueId、fileObj、errorObj四個參數,其中前三個參
數同上,errorObj對象有type和info兩個屬性。
type:錯誤的類型,有三種‘HTTP', ‘IO', or ‘Security'
info:錯誤的描述
onOpen :點擊上傳時觸發,如果auto設置為true則是選擇文件時觸發,如果有多個文件上傳則遍歷整個文件隊列。
該函數有event、queueId、fileObj三個參數,參數的解釋同上。
onProgress :點擊上傳時觸發,如果auto設置為true則是選擇文件時觸發,如果有多個文件上傳則遍歷整個文件隊
 列,在onOpen之後觸發。該函數有event、queueId、fileObj、data四個參數,前三個參數的解釋同上。
data對象有四個屬性percentage、bytesLoaded、allBytesLoaded、speed:
percentage:當前完成的百分比
bytesLoaded:當前上傳的大小
allBytesLoaded:文件隊列中已經上傳完的大小
speed:上傳速率 kb/s
onComplete:文件上傳完成後觸發。該函數有四個參數event、queueId、fileObj、response、data五個參數,前三個參數
同上。response為後台處理程序返回的值,在上面的例子中為1或0,data有兩個屬性fileCount和speed
fileCount:剩余沒有上傳完成的文件的個數。
speed:文件上傳的平均速率 kb/s
注:fileObj對象和上面講到的有些不太一樣,onComplete 的fileObj對象有個filePath屬性可以取出上傳文件的路徑。
onAllComplete:文件隊列中所有的文件上傳完成後觸發。該函數有event和data兩個參數,data有四個屬性,
分別為:
filesUploaded :上傳的所有文件個數。
errors :出現錯誤的個數。
allBytesLoaded :所有上傳文件的總大小。
speed :平均上傳速率 kb/s

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved