1. 程式人生 > >jQuery多檔案上傳

jQuery多檔案上傳

引入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">

簡單的HTML檔案

<form>
<div id="queue"></div>
<input id="file_upload"

name="file_upload" type="file" multiple="true">
</form>

對應的js函式,

<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>

函式中對應的引數進行詳細的介紹;

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