使用Uploadify實現上傳圖片生成縮略圖例子,實時顯示進度條

不了解Uploadify的，先看看前一篇詳細說明

http://www.cnblogs.com/XuebinDing/archive/2012/04/26/2470995.html

Uploadify簡單說來，是基於Jquery的一款文件上傳插件。它的功能特色總結如下：

1. 支持單文件或多文件上傳，可控制並發上傳的文件數
2. 在服務器端支持各種語言與之配合使用，諸如PHP,.NET,Java……
3. 通過參數可配置上傳文件類型及大小限制
4. 通過參數可配置是否選擇文件后自動上傳
5. 易於擴展，可控制每一步驟的回調函數（onSelect, onCancel……）
6. 通過接口參數和CSS控制外觀
7. 提供上傳進度的事件回調，實時顯示上傳進度

開始之前要先下載插件安裝包到本地並引用，詳細實現請看代碼注釋，下面開始代碼。
1、html 代碼

<div id="webApplogo_file" style="display: block; width: 800px; ">
            <ul>
                <li style="margin-left: 213px;"><span class="black_blod14">LOGO圖標：</span></li>
                <li style="margin-left: 3px;">
                    <input type="text" readonly="readonly" id="text_webApplogo" name="app_logo" class="appipt1" value="<%=applogo %>" /></li>
                <li style="padding-top: 1px;">
                    <input type="file" id="webApplogo" name="webApplogo" />
                </li>
                <li><span style="display: none; margin-left: 5px; padding-left: 20px; color: #EA5200;
                    font-size: 12px; background: url('Images/icon_03.gif' ) no-repeat 0px 0px;" id="textporApplogo">
                    請上傳LOGO圖標！</span></li>
                <li style="margin-left: 220px;"><span class="grey999" style="margin-left: 90px; float: left;">
                    尺寸72px*72px，png格式,建議使用 圖標PSD模板 制作</span>
                    <div id="QID_webApplogo" class="fileQueue"></div>
                    <table id="webApplogo_tab" width="50%" border="0" cellspacing="0" cellpadding="0"
                        align="center" class="grey999" style="display: none; margin-left: 90px; float: left;">
                        <tr>
                            <td align="center" valign="bottom">
                                <img style="width: 64px; height: 64px;" id="img_64" src="images/icon_02.gif" border="0" /><br />
                                (64*64)
                            </td>
                            <td align="center" valign="bottom">
                                <img style="width: 48px; height: 48px;" id="img_48" src="images/icon_02.gif" border="0" /><br />
                                (48*48)
                            </td>
                            <td align="center" valign="bottom">
                                <img style="width: 32px; height: 32px;" id="img_32" src="images/icon_02.gif" border="0" /><br />
                                (32*32)
                            </td>
                            <td align="center" valign="bottom">
                                <img style="width: 16px; height: 16px;" id="img_16" src="images/icon_02.gif" border="0" /><br />
                                (16*16)
                            </td>
                        </tr>
                    </table>
                </li>
            </ul>
        </div>

2、Javascript 代碼（關鍵部分）

$("#webApplogo").uploadify({ 
            'uploader': 'js/uploadify-v2.1.4/uploadify.swf',//進度條，Uploadify里面含有
            'script': 'UploadApplogo.ashx',//一般處理程序
            'cancelImg': 'js/uploadify-v2.1.4/cancel.png',//取消圖片路徑
            'folder': 'Imagelogo',//上傳文件夾名
            'auto': true, //文件添加到上傳隊列后，自動進行上傳。默認為false
            'multi': false,//是否允許多文件上傳。默認為false
            'fileExt':'*.gif;*.jpg;*.jpeg;*.png',//允許上傳的文件類型，使用分號(”;)”分割 例如:*.jpg;*.gif,默認為null(所有文件類型)
            'fileDesc':'不超過2M的圖片 (*.gif;*.jpg;*.png)',
            'sizeLimit': 2048000,  //允許上傳的文件大小(kb)  此為2M
            'onSelectOnce': function(event,data) { //在單文件或多文件上傳時，選擇文件時觸發
                //event 事件對象(the event object)
                //data 選擇的操作信息
                //data.filesSelected 選擇文件操作中選中的文件數量
                $('#status-message').text(data.filesSelected + ' 文件正在等待上傳…….'); 
            },
            'onComplete': function(event, queueID, fileObj, response, data) {//當單個文件上傳完成后觸發
                //event:事件對象(the event object)
                //ID:該文件在文件隊列中的唯一表示
                //fileObj:選中文件的對象，他包含的屬性列表
                //response:服務器端返回的Response文本，我這里返回的是處理過的文件名稱
                //data：文件隊列詳細信息和文件上傳的一般數據

                alert("文件:" + fileObj.name + " 上傳成功！");
                //設置圖片名稱
                $("#applogo").attr("value",response);
                //設置輸入框的值
                $("#text_webApplogo").attr("value",fileObj.name);
                //設置圖片路徑
                $("#img_64").attr("src","Imagelogo/64_"+response);
                $("#img_48").attr("src","Imagelogo/48_"+response);
                $("#img_32").attr("src","Imagelogo/32_"+response);
                $("#img_16").attr("src","Imagelogo/16_"+response);
                //圖片路徑設置完成后，顯示圖片
                $("#webApplogo_tab").css("display","block");
            },
            'onError': function(event, queueID, fileObj) {//當單個文件上傳出錯時觸發
                alert("文件:" + fileObj.name + " 上傳失敗！");
            },
            'buttonImg':'Images/bn_04.gif',//瀏覽按鈕的圖片路徑
            'width':60,//瀏覽按鈕的寬和高
            'height':24
            ,'queueID':'QID_webApplogo'//頁面上作為文件上傳隊列的元素的ID
        });

3、服務器端處理文件上傳

 1     /// <summary>
 2     /// 上傳文件
 3     /// </summary>
 4     public class UploadApplogo : IHttpHandler
 5     {
 6         System.Drawing.Image image, image64, image48, image32, image16; //定義image類的對象
 7         protected string imagePath;//圖片路徑
 8         protected string imageType;//圖片類型
 9         protected string imageName;//圖片名稱
10         protected string fileName;//圖片名稱
11         //提供一個回調方法,用於確定Image對象在執行生成縮略圖操作時何時提前取消執行
12         //如果此方法確定 GetThumbnailImage 方法應提前停止執行，則返回 true；否則返回 false
13         System.Drawing.Image.GetThumbnailImageAbort callb = null;
14 
15         public void ProcessRequest(HttpContext context)
16         {
17             context.Response.ContentType = "text/plain";
18             HttpPostedFile UploadImage = context.Request.Files["FileData"];
19             //物理路徑
20             string uploadpath = HttpContext.Current.Server.MapPath(context.Request["folder"] + "\\");
21 
22             if (UploadImage != null)
23             {
24                 //是否有目錄，如沒有就創建
25                 if (!Directory.Exists(uploadpath))
26                 {
27                     Directory.CreateDirectory(uploadpath);
28                 }
29                 //客戶端文件完全名稱
30                 string filename = UploadImage.FileName;
31                 string extname = filename.Substring(filename.LastIndexOf(".") + 1);
32                 //為不重復，設置文件名
33                 fileName = Guid.NewGuid().ToString() + "." + extname;
34 
35                 //context.Response.Write("1");
36                 context.Response.Write(fileName);
37             }
38             else
39             {
40                 context.Response.Write("0");
41             }
42 
43             string mPath;            
44 
45             imagePath = UploadImage.FileName;
46             //取得圖片類型
47             imageType = imagePath.Substring(imagePath.LastIndexOf(".") + 1);
48             //取得圖片名稱
49             imageName = imagePath.Substring(imagePath.LastIndexOf("\\") + 1);
50             Stream imgStream = UploadImage.InputStream;//流文件，准備讀取上載文件的內容
51             int imgLen = UploadImage.ContentLength;//上載文件大小
52 
53             //建立虛擬路徑
54             mPath = HttpContext.Current.Server.MapPath(context.Request["folder"]);
55             //保存到虛擬路徑
56             UploadImage.SaveAs(mPath + "\\" + fileName);
57             ////顯示原圖
58             //imageSource.ImageUrl = "upFile/" + imageName;
59             //為上傳的圖片建立引用
60             image = System.Drawing.Image.FromFile(mPath + "\\" + fileName);
61 
62             //生成縮略圖
63             image64 = image.GetThumbnailImage(64, 64, callb, new System.IntPtr());
64             //把縮略圖保存到指定的虛擬路徑
65             image64.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\\64_" + fileName);
66             //釋放image64對象的資源
67             image64.Dispose();
68 
69             //生成縮略圖
70             image48 = image.GetThumbnailImage(48, 48, callb, new System.IntPtr());
71             image48.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\\48_" + fileName);
72             image48.Dispose();
73 
74             //生成縮略圖
75             image32 = image.GetThumbnailImage(32, 32, callb, new System.IntPtr());
76             image32.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\\32_" + fileName);
77             image32.Dispose();
78 
79             //生成縮略圖
80             image16 = image.GetThumbnailImage(16, 16, callb, new System.IntPtr());
81             image16.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\\16_" + fileName);
82             image16.Dispose();
83 
84             //釋放image對象占用的資源
85             image.Dispose();
86         }
87 
88         public bool IsReusable
89         {
90             get
91             {
92                 return false;
93             }
94         }
95     }

3、效果如下