文章導航
1、前言
2、上傳組件功能說明
3、數據庫結構
4、上傳配置管理
5、上傳組件所使用到的類
6、上傳組件調用方法
7、效果演示
8、小結
1、前言
本系列所使用的是上傳組件是大神July開發的,他為人比較低調,一直都沒有寫博。為了感謝他將這么好的插件開源出來,在這里簡單的為他宣傳一下。在我的圈子當中,他是一位非常牛的人,前端方面非常精通,沒有解決不了的兼容性問題,而后端開發又精通多種開發語言(PHP、C#、VB、JAVA等),經手開發過的大中小型項目過百。承接各種外包開發,想聯系他的話可以加入Q群327360708找July。
2、上傳組件功能說明
本上傳組件已將上傳相關的功能都封裝好了,在使用的時候,只需要使用簡單的幾行代碼,就可以實現圖片文件檢驗、上傳權限驗證、上傳路徑相關文件夾創建、文件上傳、按配置生成各種規格(縮放)圖片和進行壓縮、加水印、關聯數據表、自動刪除舊文件與數據表記錄、修改配置后所有圖片文件重新生成等功能。
支持asp.net控件、html控件、編輯器(又分為本地上傳與遠程上傳兩種)與swf(這種控件上傳方式沒有用過,目前還不太清楚怎么調用,等有空再請教July大神)等方式上傳。
3、數據庫結構
本上傳組件需要創建三個數據表
上傳類型表用於設置可以上傳的文件類型
上傳配置表,它的用途大家看看字段說明就知道了,而我們主要將它用在上傳圖片的處理上,比如上傳一張圖片要生成那些格式(大、中、小與推薦圖),圖片規格是什么(寬、高與質量),用不用加水印,按什么比例生成等,在這里配置后馬上生效,上傳生成的圖片規格跟着改變。
上傳文件管理表記錄當前系統中,所有通過本上傳組件上傳到服務器中的文件信息,方便管理員進行管理操作,比如前端UI重新設計后,某些頁面圖片規格改變了,正常情況下需 要設計師手動或使用某些軟件將這些圖片全部重新修改,這樣處理工作量大且容易出錯,而本組件則可以通過在上傳配置中重新設置不同大小的圖片生成規格,然后點擊全部圖片重新生成按鈕后,程序就會在本管理表中將指定類型與配置的所有圖片按新配置,使用原來的文件名稱逐個重新生成出來。
4、上傳配置管理
1)進入后端管理系統,系統管理=》基礎設置=》上傳類型設置
在這里添加與管理各種允許上傳的文件類型,見下圖
2)系統管理=》基礎設置=》上傳配置管理
在這里設置上傳的各種規則,所有需要調用到上傳組件的地方,都需要這里進行配置。創建好以后獲取對應的Id值,在開發的代碼中綁定記錄,具體怎么使用后面會講到
上傳配置列表
上傳配置編輯頁面
廣告內容管理頁面,我們上傳了一個廣告圖片
這是上傳成功后,在上傳文件夾中對應生成的圖片,大家可以試試修改生成規格后重新上傳,或點擊“已上傳文件管理”頁面中的,看看圖片變化
3)系統管理=》基礎設置=》已上傳文件管理
在這里顯示所有通過本上傳組件上傳到服務器的所有記錄,可以將直接將一些不要的文件刪除,也可以點擊“圖片全部重新生成”按鈕生成圖片。
5、上傳組件所使用到的類
上傳組件所用的的類存放路徑與說明(原版雖然分層,但沒這么多文件,使用SQLHelper來執行數據庫更新,被我改得好像很復雜的樣子,呵呵...看起來是不是有點高大上,很難理解兼很復雜的樣子+_+...)
項目 | 文件夾路徑 | 文件名 | 說明 |
DotNet.Utilities | File | DirFileHelper.cs | 文件夾與文件操作類,主要用於文件夾創建、上傳文件添加、刪除,以及其他相關的文件操作函數 |
DotNet.Utilities | Uploader | Uploader.cs | 上傳類,文件上傳、檢查、生成、水印等各種操作 |
Solution.DataAccess | SubSonic | UploadConfig.cs UploadFile.cs UploadType.cs ...... |
模板生成的上傳組件數據表相關實體類,以及其他數據層操作類 |
Solution.Logic.Managers | Application | UploadFileBll.cs | 上傳邏輯類,主要用於權限檢查、上傳文件的相關判斷處理、增改刪上傳組件相關的數據庫信息、關聯相關數據表等功能 |
Solution.Logic.Managers | SubSonic | UploadConfigBll.cs UploadFileBll.cs UploadTypeBll.cs |
T4模板生成的幾個上傳表對應的邏輯類文件,主要給第4點那些后端管理頁面所使用 |
Solution.Web.Managers | Application | FileUpload.ashx | UI層編輯器調用的上傳接口 |
Solution.Web.Managers | Application | RemoteUpload.ashx | UI層編輯器使用遠程上傳接口(在編輯器上粘貼有圖片時,將圖片下載到服務器上,實現遠程上傳) |
6、上傳組件調用方法
代碼中有三種調用上傳的方法,一種是ASP.NET控件,一種是html控件,還有是遠程上傳(即傳入遠程圖片Url自動下載更新)
ASP.NET控件上傳調用方法
1 //這個放在cs文件Page_Load函數的前面,用於生成一個隨一個Key,以便上傳完成后已上傳文件管理表綁定對應Id 2 protected string RndKey = RandomHelper.GetRndKey(); 3 4 #region 上傳圖片 5 //判斷前端的ASP.NET上傳控件是否選擇有上傳文件 6 if (this.filePhoto.HasFile && this.filePhoto.FileName.Length > 3) 7 { 8 //將當前頁面上傳文件綁定上傳配置表Id為7的記錄,給上傳組件的邏輯層函數調用 9 int vid = 7; //7 廣告 10 //--------------------------------------------------- 11 //創建上傳實體 12 var upload = new UploadFile(); 13 //調用ASP.NET上傳控件上傳函數,並獲取上傳成功或失敗信息 14 result = new UploadFileBll().Upload_AspNet(this.filePhoto.PostedFile, vid, RndKey, 15 OnlineUsersBll.GetInstence().GetManagerId(), OnlineUsersBll.GetInstence().GetManagerCName(), 16 upload); 17 this.filePhoto.Dispose(); 18 //--------------------------------------------------- 19 //沒有返回信息時表示上傳成功 20 if (result.Length == 0) 21 { 22 //將上傳到服務器后的路徑賦給廣告實體對應字段 23 model.AdImg = upload.Path; 24 } 25 else 26 { 27 //將出錯寫入日志中 28 CommonBll.WriteLog("上傳出錯:" + result); //收集異常信息 29 //彈出出錯提示 30 return "上傳出錯!" + result; 31 } 32 } 33 //如果是修改,檢查用戶是否重新上傳過廣告圖片,如果是刪除舊的圖片 34 if (model.Id > 0) 35 { 36 //刪除舊圖片 37 UploadFileBll.GetInstence() 38 .Upload_DiffFile(AdvertisementTable.Id, AdvertisementTable.AdImg, AdvertisementTable.TableName, 39 model.Id, model.AdImg); 40 41 //同步UploadFile上傳表記錄,綁定剛剛上傳成功的文件Id為當前記錄Id 42 UploadFileBll.GetInstence().Upload_UpdateRs(RndKey, AdvertisementTable.TableName, model.Id); 43 } 44 45 #endregion
上面代碼功能大家請看注釋說明,在調用時直接復制上面代碼然后修改vid的值、頁面上傳控件名稱(filePhoto改為你自己設置的名稱)、當前數據表名稱(AdvertisementTable,這個一般在替換的時候已經改好了)和存放上傳文件路徑字段(AdImg改為當前數據表對應字段名稱)就可以了。
html控件上傳方法
1 #region 上傳圖片 2 //將當前頁面上傳文件綁定上傳配置表Id為7的記錄,給上傳組件的邏輯層函數調用 3 int vid = 7; //7 廣告 4 //--------------------------------------------------- 5 //創建上傳實體 6 var upload = new UploadFile(); 7 //調用ASP.NET上傳控件上傳函數,並獲取上傳成功或失敗信息 8 result = new UploadFileBll().Upload_Web(vid, RndKey, 9 OnlineUsersBll.GetInstence().GetManagerId(), OnlineUsersBll.GetInstence().GetManagerCName(), 10 upload, "Html上傳控件名稱"); 11 this.filePhoto.Dispose(); 12 //--------------------------------------------------- 13 //沒有返回信息時表示上傳成功 14 if (result.Length == 0) 15 { 16 //將上傳到服務器后的路徑賦給廣告實體對應字段 17 model.AdImg = upload.Path; 18 } 19 else 20 { 21 //將出錯寫入日志中 22 CommonBll.WriteLog("上傳出錯:" + result); //收集異常信息 23 //彈出出錯提示 24 return "上傳出錯!" + result; 25 } 26 27 //如果是修改,檢查用戶是否重新上傳過廣告圖片,如果是刪除舊的圖片 28 if (model.Id > 0) 29 { 30 //刪除舊圖片 31 UploadFileBll.GetInstence() 32 .Upload_DiffFile(AdvertisementTable.Id, AdvertisementTable.AdImg, AdvertisementTable.TableName, 33 model.Id, model.AdImg); 34 35 //同步UploadFile上傳表記錄,綁定剛剛上傳成功的文件Id為當前記錄Id 36 UploadFileBll.GetInstence().Upload_UpdateRs(RndKey, AdvertisementTable.TableName, model.Id); 37 } 38 39 #endregion
與前面不同的只是調用的上傳函數Upload_Web不一樣而已,不過這段代碼沒有直接測試過,理論上是沒有問題的,呵呵...(以前前端項目中使用過正常,不過代碼與本框架的不一樣,所以就不貼出來了)
遠程上傳方法
這種上傳方法需要配合編輯器使用,框架中的編輯器已設置好了,所以不進行詳細說明
7、效果演示
1)上傳廣告圖片后修改圖片配置后重新生成演示
演示前大家先更新一下代碼,打開AdvertisementEdit.aspx.cs文件,找到AdvertisementBll.GetInstence().Save(this, model),在這個代碼后添加下面代碼,之前發布的代碼忘了添加新增記錄時,同步綁定圖片記錄Id了

1 #region 同步更新上傳圖片表綁定Id 2 if (id == 0) 3 { 4 //同步UploadFile上傳表記錄,綁定剛剛上傳成功的文件Id為當前記錄Id 5 UploadFileBll.GetInstence().Upload_UpdateRs(RndKey, AdvertisementTable.TableName, model.Id); 6 } 7 8 #endregion
在廣告內容管理頁面點擊新增
添加后顯示效果
生成的文件以及大小
進入上傳配置管理,修改廣告圖片的配置,如下圖
進入已上傳文件列表,點擊圖片全部重新生成
查看文件夾中的圖片大小,已改變了
2)上傳非圖片文件演示
新建一個文本文件,然后輸入內容
將文本文件名稱修改為bbb.jpg
打開廣告圖片編輯窗口,選擇剛改名為bbb.jpg的假圖片,點擊上傳
程序會判斷出該文件不是圖片,不給予上傳
3)遠程圖片上傳演示
復制瀏覽器上的圖片到編輯器,點擊遠程上傳圖片按鈕
點擊查看Html代碼,可以看到Url為遠程的
打開遠程上傳程圖片界面,點擊確定
上傳成功
編輯器中顯示的圖片已經是上傳后的了
查看Html對比一下
看看文件夾里上傳的文件
8、小結
寫到這里,本系列代碼部分的說明算是結束了,回頭看看與自己訂下的方案,還是有不少偏差,自己也覺得很不滿意。由於近段時間工作越來越忙,已經沒有太多時間兼顧本系列的編寫,一些細節也就沒空說明,代碼部分只能是草草收場了。
有時打開前面所寫的章節,自己會感到寫得很粗糙,無論文筆或講述的內容,都存在問題。不過在編寫的過程中,自己的確得到了很大的提升,在與眾多園友、群友交流的過程中,也學習了很多很多新的知識點,相信如果時間充足,重新寫過的話就不會是這個樣子了,可能會像本章一樣,只是針對一個知識點進行描述,這樣會幫忙大家更容易了解。另外,設想中需要繪制的不少流程圖或其他相關的圖形也沒有畫出來,更不要說視頻了,這些只能是以后有時間再補充了。
對於代碼部分,確實像某些朋友所說的那樣,由於使用了模板生成,沒有對代碼進行優化,存在着大量冗余代碼,暫時先這樣用用吧,反正使用了模板改起來也很方便,對二次開發與維護開發效率也沒有影響,以后有時間再看看是否進行優化吧。
學習本框架的開發,首先一定要有ASP.NET的基礎,沒有基礎的話想一下子學習框架開發,那真的很難,就算你直接加我QQ問我,我也很難幫你跳過基礎直接學習框架開發。還有就是如果不看前面的文章,想加快速度直接從代碼着手,如果你是大神的話這也沒有問題,不然想要理解整個開發思路又不想花時間看說明,那我也沒辦法幫到你,除非你同我在一塊工作,我花一天時間為你講解,那樣你可能就會很快上手,能對本框架一知半解了(要全部了解還是得從前面文章學起)。
另外如果學習過程中碰到問題時,可以多Debug嘗試自己解決,解決不了再上百度或Google查查,又或者在貼子的評論處發發你的問題,或Email給我,當然在QQ群里問問更方便,很多朋友都樂意為你解答。直接問我也行,不過近來實在太忙了,不可能實時幫你解答遇到的各種問題,必竟我本人也要工作,也要養家糊口。
在學習的過程中,必須要從前面開始看起,從中間查看的話,特別是代碼部分,你會一頭霧水,因為都是在前面的基礎上衍生過來的。當然15到20章看不明白的可以大概的了解一下內容就可以了,直接用21章說明步驟進行操作,或自己創建一些數據表,根據已完成的頁面功能復制過去修改幾次,那你就會很快的上手。等對使用本框架開發熟悉以后,再去研究底層應用的一些技術,那樣就會更容易了解框架結構了。
做上面演示時才發現,原來還存在一些小BUG,所以重新整理了一下,將修改過的文件找出來打包,大家請點擊下載更新,或重新下載上一章的解決方案也行
由於框架不是非常成熟,很多朋友不是用來學習而是直接用到項目中,但不熟悉框架引起不少小問題,所以停止提供下載,有需要學習的可以到群共享里下,不便之處敬請諒解。
版權聲明:
本文由AllEmpty原創並發布於博客園,歡迎轉載,未經本人同意必須保留此段聲明,且在文章頁面明顯位置給出原文鏈接,否則保留追究法律責任的權利。如有問題,可以通過1654937@qq.com 聯系我,非常感謝。
發表本編內容,只要主為了和大家共同學習共同進步,有興趣的朋友可以加加Q群:327360708 ,大家一起探討。
更多內容,敬請觀注博客:http://www.cnblogs.com/EmptyFS/