Uploadify 是 JQuery 的一個上傳插件,但是官方只提供 php 版本,這裡將介紹 Uploadify 在 Asp.net for C# 中的使用。

 

官方資源:

下載

說明     (如果認為下面的範例太複雜,官方網站有提供基本的範例。

            這裡還包含了所有關於uploadify的屬性說明,每個屬性都有範例可看,非常淺顯易懂!)

Demo  

 

準備工作:

1、在專案中加入項目,選擇泛型處理常式,並取名為UploadHandler.ashx,此檔案用來取代php處理文件的上傳。

2、在專案中加入PublicFile資料夾,用來存放上傳的文件。

 

在想執行上傳的動作的aspx檔裡加入:

<link href="../Scripts/uploadify-v2.1.4/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../Scripts/uploadify-v2.1.4/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../Scripts/uploadify-v2.1.4/swfobject.js"></script>
<script type="text/javascript" src="../Scripts/uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript" charset="UTF-8">
        $(document).ready(function () {
            $("#uploadify").uploadify({
                'uploader': '../Scripts/uploadify-v2.1.4/uploadify.swf',
                'script': '../UploadHandler.ashx',//處理上傳動作的檔案,原本為php
                'cancelImg': '../Scripts/uploadify-v2.1.4/cancel.png',
                'folder': '../PublicFile/文件',
                'queueID': 'fileQueue',
                'auto': true,
                'multi': true,
                'removeCompleted': false, //上傳完成後,true為自動刪除隊列
                'fileDesc': '.JPG,.GIF,.PNG',
                'fileExt': '*.png;*.jpg;*.gif',
                'onSelectOnce': function (event, data) {
                    $('#status-message').text(data.filesSelected + ' 個檔案已被加入到上傳隊列。');
                },
                'onComplete': function (event, ID, fileObj, response, data) {
                    if (document.getElementById("txtFileName").value == "")
                        document.getElementById("txtFileName").value = fileObj.name;
                    else
                        document.getElementById("txtFileName").value = document.getElementById("txtFileName").value + "," + fileObj.name;
                },//每一個文件上傳完成後觸發,這裡拿來取上傳文件的檔名,並存入txtFileName裡
                'onAllComplete': function (event, data) {
                    $('#status-message').text(data.filesUploaded + ' 個檔案上傳完成, ' + data.errors + ' 個檔案出錯。');
                    document.getElementById("LabUpload").style.display = "block"; //顯示
                }//所有文件上傳完成後觸發
            });
        });
</script>

<tr>
    <td height="30" bgcolor="#EFEFEF" class="mainjoinfont">
        上傳測試
    </td>
    <td height="30" bgcolor="#FFFFFF">
    <div id="status-message">請選擇上傳檔案:</div>
    <asp:Label runat="server" ID="LabUpload" style="display: none">
        <a id="aBtnClear" href="javascript:$('#uploadify').uploadifyClearQueue()" onfocus="this.blur();">清除隊列</a>
    </asp:Label>
    <div id="fileQueue"></div>
    
    
    </td>
</tr>

 

UploadHandler.ashx程式碼:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Text;

namespace NewUpload
{
    /// 
    ///UploadHandler 的摘要描述
    /// 
    public class UploadHandler : IHttpHandler
    {

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

            //由於uploadify的flash是採用utf-8的編碼方式,所以上傳頁面也要用utf-8編碼,才能正常上傳中文檔名的文件
            context.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");
            context.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");
            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");
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

 

執行結果:

 

 

下一篇將介紹如何正確顯示中文檔名~

C# uploadify上傳文件及存放資料夾使用中文檔名的正確顯示方法

, , , ,

魔法魚 發表在 痞客邦 PIXNET 留言(2) 人氣()


留言列表 (2)

發表留言
  • 新手
  • 您好,感謝大大的分享
    但是我在試著照您的CODE去運作時,上傳介面操作都正常,但是上傳後都會出現上傳失敗- HTTP Error的錯誤,我研究了很久還是找不到問題點,想請問您是否有相關的問題經驗呢?
  • Ben
  • 您好, 我情況跟#1的大大一樣耶..都顯示了HTTP ERROR/IO ERROR, 請問您有沒有解決方法?