使用SWFUpload組件無刷新上傳圖片
在做項目時，需要用到一個圖片的無刷新上傳，之前聽說過SWFUpload，于是想要通過SWFUpload來進行圖片的無刷新上傳，由于我的項目屬于是asp.net項目，所以本文著重講解ASP.NET 的使用，個人感覺示例基本給的很清晰，參考文檔進行開發，并非難事
0. 首先下載swfUpload 包，在下載的包中有samples文件夾，samples下有demos文件夾，打開demos文件夾可看到如下圖所示結構
我們待會會用到的包括，swfupload目錄下的文件，CSS不建議使用以避免與自己寫的CSS相沖突使得頁面布局完全亂掉，如果要添加樣式最好自己寫
打開 applicationdemo.net目錄會看到這樣的結構
打開index.html可以看到這樣的頁面
點擊NET2.0下的Application Demo C#項
將要引用的資源包含到項目中（包括swfupload文件夾下的文件與，demo下的資源文件，handlers.js是在demo中js目錄下的js文件）
在Defaut.aspx頁面中使用swfUpload組件進行圖片的無刷新上傳直接運行，看效果，大概了解基本過程
我的項目文件結構大概是這樣的
我的處理文件上傳的頁面是ImageUploadHandler.ashx，獲取縮略圖的頁面是GetThumbHandler.ashx,Thumbnail.cs是demo中App_Code文件夾中的文件,個人覺得像這種只處理邏輯功能而不展現頁面的最好都用一般處理程序來實現。由于哪個文件處理上傳哪個文件生成縮略圖已經在handlers.js文件中寫死了，所以必須要修改handlers.js文件以能夠使頁面正常運行
1 /// <summary> 2 /// 縮略圖 3 /// </summary> 4 public class Thumbnail 5 { 6 public Thumbnail(string id, byte[] data) 7 { 8 this.ID = id; 9 this.Data = data;10 }11 12 PRivate string id;13 14 /// <summary>15 /// 圖片id16 /// </summary>17 public string ID18 {19 get20 {21 return this.id;22 }23 set24 {25 this.id = value;26 }27 }28 29 private byte[] thumbnail_data;30 31 /// <summary>32 /// 圖片的二進制數據33 /// </summary>34 public byte[] Data35 {36 get37 {38 return this.thumbnail_data;39 }40 set41 {42 this.thumbnail_data = value;43 }44 }45 46 private string contentType;47 48 /// <summary>49 /// 圖片對應的MIME類型50 /// </summary>51 public string ContentType52 {53 get54 {55 return contentType;56 }57 58 set59 {60 contentType = value;61 }62 }63 }Thumbnail<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Upload Images</title> <script src="swfupload/swfupload.js"></script> <script src="swfupload/handlers.js"></script> <script> //注：div的id名稱最好不要改，要改的話在handlers.js文件中也要進行修改，div的名稱已經在handlers.js文件中寫死 var swfu; window.onload = function () { swfu = new SWFUpload({ // 后臺設置，設置處理上傳的頁面 upload_url: "/Handlers/ImageUploadHandler.ashx", // 文件上傳大小限制設置 file_size_limit: "3 MB", //文件類型設置，多種格式以英文中的分號分開 file_types: "*.jpg;*.png", //文件描述，與彈出的選擇文件對話框相關 file_types_description : "Images file", //設置上傳文件數量限制 file_upload_limit: "1", //事件處理程序，最好不要改，事件處理程序已在handlers.js文件中定義 // Event Handler Settings - these functions as defined in Handlers.js // The handlers are not part of SWFUpload but are part of my website and control how // my website reacts to the SWFUpload events. file_queue_error_handler : fileQueueError, file_dialog_complete_handler : fileDialogComplete, upload_progress_handler : uploadProgress, upload_error_handler : uploadError, upload_success_handler : uploadSuccess, upload_complete_handler : uploadComplete, // 上傳按鈕設置 button_image_url : "/swfupload/images/XPButtonNoText_160x22.png", button_placeholder_id: "spanButtonPlaceholder", button_width: 160, button_height: 22, button_text : '請選擇圖片 (最大3M)', button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }', button_text_top_padding: 1, button_text_left_padding: 5, // swfupload.swf Flash設置 flash_url : "/swfupload/swfupload.swf", //自定義的其他設置 custom_settings : { upload_target: "divFileProgressContainer" }, // 是否開啟調試模式，調試時可以設置為true，發布時設置為false debug: false }); } </script></head><body> <form id="form1"> <div id="content"> <h2>Upload Images Demo</h2> <div id="swfu_container" style="margin: 0px 10px;"> <div> <span id="spanButtonPlaceholder"></span> </div> <div id="divFileProgressContainer" style="height: 75px;"></div> <div id="thumbnails"></div> </div> </div> </form></body></html>Html Demo
1 /// <summary> 2 /// 圖片上傳處理 3 /// </summary> 4 public class ImageUploadHandler : IHttpHandler, IRequiressessionState 5 { 6 /// <summary> 7 /// 記錄日志 logger 8 /// </summary> 9 private static Common.LogHelper logger = new Common.LogHelper(typeof(ImageUploadHandler)); 10 public void ProcessRequest(HttpContext context) 11 { 12 context.Response.ContentType = "text/plain"; 13 System.Drawing.Image thumbnail_image = null; 14 System.Drawing.Image original_image = null; 15 System.Drawing.Bitmap final_image = null; 16 System.Drawing.Graphics graphic = null; 17 MemoryStream ms = null; 18 try 19 { 20 //驗證用戶是否登錄，是否有權限上傳 21 if (context.Session["User"]==null) 22
新聞熱點
疑難解答
