萬盛學電腦網 >> 網絡編程 >> 編程語言綜合 >> 使用SWFUpload實現無刷新上傳圖片
使用SWFUpload實現無刷新上傳圖片
現在網站不再講究的是功能性，更多的是用戶體驗性，在這裡上傳圖片就需要用到ajax無刷新上傳圖片，這裡面包含的東西不是一點半點 。這裡用到的是一個插件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文件)
首先熟悉demo，將demo中的頁面包含到項目中
在Defaut.aspx頁面中使用swfUpload組件進行圖片的無刷新上傳直接運行，看效果，大概了解基本過程
修改handlers.js文件
我的項目文件結構大概是這樣的
我的處理文件上傳的頁面是ImageUploadHandler.ashx，獲取縮略圖的頁面是GetThumbHandler.ashx,Thumbnail.cs是demo中App_Code文件夾中的文件,個人覺得像這種只處理邏輯功能而不展現頁面的最好都用一般處理程序來實現。由於哪個文件處理上傳哪個文件生成縮略圖已經在handlers.js文件中寫死了，所以必須要修改handlers.js文件以能夠使頁面正常運行
最終修改版匯總
Thumbnail
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 /// <summary> /// 縮略圖 /// </summary> public class Thumbnail { public Thumbnail(string id, byte[] data) { this.ID = id; this.Data = data; } private string id; /// <summary> /// 圖片id /// </summary> public string ID { get { return this.id; } set { this.id = value; } } private byte[] thumbnail_data; /// <summary> /// 圖片的二進制數據 /// </summary> public byte[] Data { get { return this.thumbnail_data; } set { this.thumbnail_data = value; } } private string contentType; /// <summary> /// 圖片對應的MIME類型 /// </summary> public string ContentType { get { return contentType; } set { contentType = value; } } }Html Demo
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 <!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", //事件處理
