首頁 > 開發者 > PHP

基於JQuery上傳外掛程式Uploadify+php使用詳解

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

如何使用
　　1 建立Web項目，命名為JQueryUploadDemo，從官網上下載最新的版本解壓後添加到項目中
　　2 在項目中添加UploadHandler.ashx檔案用來處理檔案的上傳。
　　3 在項目中添加UploadFile檔案夾，用來存放上傳的檔案。
　　進行完上面三步後項目的基本結構如下圖:

　　
　　4 Default.aspx的html頁的代碼修改如下：

 代碼如下 複製代碼

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Uploadify</title>
    <link href="JS/jquery.uploadify-v2.1.0/example/css/default.css"
     rel="stylesheet" type="text/css" />
    <link href="JS/jquery.uploadify-v2.1.0/uploadify.css"
     rel="stylesheet" type="text/css" />

    <script type="text/javascript"
     src="JS/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script>

    <script type="text/javascript"
     src="JS/jquery.uploadify-v2.1.0/swfobject.js"></script>

    <script type="text/javascript"
   src="JS/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script>

    <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
            });
        });
    </script>

</head>
<body>
    <div id="fileQueue"></div>
    <input type="file" name="uploadify" id="uploadify" />
    <p>
      <a href="javascript:$('#uploadify').uploadifyUpload()">上傳</a>|
      <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上傳</a>
    </p>
</body>
</html>
　　

5  UploadHandler類的ProcessRequest方法代碼如下：
　　
代碼

 代碼如下 複製代碼

public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/plain";
    context.Response.Charset = "utf-8";  

    HttpPostedFile file = context.Request.Files["Filedata"];
    string  uploadPath =
        HttpContext.Current.Server.MapPath(@context.Request["folder"])+""; 

    if (file != null)
    {
       if (!Directory.Exists(uploadPath))
       {
           Directory.CreateDirectory(uploadPath);
       }
       file.SaveAs(uploadPath + file.FileName);
        //下面這句代碼缺少的話，上傳成功後上傳隊列的顯示不會自動消失
       context.Response.Write("1");
    }
    else
    {
        context.Response.Write("0");
    }
}
　　

注意:這裡一定要注意，一定要引用using System.IO;命名空間，我出錯的原因也是在這裡，網上的教程基本上都沒提到這一點，所以有很多網友會遇到IOError的錯誤。


7 選擇了兩個檔案後，點擊上傳，就可以看到UploadFile檔案夾中會增加這兩個檔案。
　　
上面的代碼就簡單實現了上傳的功能，依靠函數uploadify實現，uploadify函數的參數為json格式，可以對json對象的key值的修改來進行自訂的設定，如multi設定為true或false來控制是否可以進行多檔案上傳，下面就來介紹下這些key值的意思：
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個屬性。
代碼如下：
　　
代碼

 代碼如下 複製代碼

$(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 + "rn" +
                  "檔案名稱：" + fileObj.name + "rn" +
                  "檔案大小：" + fileObj.size + "rn" +
                  "建立時間：" + fileObj.creationDate + "rn" +
                  "最後修改時間：" + fileObj.modificationDate + "rn" +
                  "檔案類型：" + fileObj.type
            );

        }
    });
});

 
當選擇一個檔案後彈出的訊息如下圖：

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
 
相關函數介紹
在上面的例子中已經用了uploadifyUpload和uploadifyClearQueue兩個函數，除此之外還有幾個函數：
uploadifySettings：可以動態修改上面介紹的那些key值，如下面代碼
　　$(‘#uploadify’).uploadifySettings(‘folder’,'JS’);　
如果上傳按鈕的事件寫成下面這樣，檔案將會上傳到uploadifySettings定義的目錄中
<a href=”javascript:$(‘#uploadify’).uploadifySettings(‘folder’,'JS’);$(‘#uploadify’).uploadifyUpload()”>上傳</a>
　　uploadifyCancel：該函數接受一個queueID作為參數，可以取消檔案隊列中指定queueID的檔案。
　　
　　$(‘#uploadify’).uploadifyCancel(id);
　　好了，所有的配置都完成了。下面說說我遇到的一些問題。 span style=”font-size: 18pt;”>　可能遇到的問題 　　1.我剛開始配置完成後，並不能正常工作 ，flash（uploadify.swf’ ）沒有載入。後來我查看jquery.uploadify.v2.1.0.js發現該外掛程式是利用swfobject.js動態建立的FLASH，後來我單獨做實驗還是不能顯示flash，無耐之下重啟電腦後就可以了。暈倒～～～　　2.FLASH終於載入進來了，但上傳又失敗了。報IOError,如圖：　

　

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More