摘 要：目前的Web頁(yè)面中都有許多圖片，這些圖片都是精心布局和設(shè)計(jì)的，使得整個(gè)頁(yè)面看起來(lái)更精致美觀。而這些圖片大部分的來(lái)源都是上傳實(shí)現(xiàn)的。在ASP.NET的應(yīng)用中，也常需要服務(wù)器上傳文檔、圖片等文件。在ASP程序中，需要使用第三方組件才能有效地處理圖片的上傳；而在ASP.NET中，通過使用內(nèi)置組件的方法即可將圖片保存到服務(wù)器中。從實(shí)際應(yīng)用角度，介紹了在ASP.NET中圖片上傳技術(shù)的實(shí)現(xiàn)過程。

關(guān)鍵詞：ASP.NET；圖片上傳；GetFileName方法

中圖分類號(hào)：TP391 文獻(xiàn)標(biāo)識(shí)碼：B

文章編號(hào)：1004-373X(2008)10-151-04

Picture Uploading Technology of ASP.NET

LIU Yi，YE Qian

(Yan′an University，Yan′an，716000，China)

Abstract：At present，there are many pictures in the Web page，these pictures are arranged and designed painstakingly in order to make the whole page looked more exquisitely.And the main resources of these pictures come by uploading.In the applying of ASP.NET，the server is often used to upload documents，pictures and so on.In the ASP programming，the third-party components are often used to make the uploading picture efficiently.However in the ASP.NET programming，the pictures can be seeded to the servers only by the internal components.From the practical point of view，this article introduces the applying of the process of uploading picture technology.

Keywords：ASP.NET;picture uploading;GetFileName method

目前網(wǎng)絡(luò)上有大量的圖片，也許大家電腦里面也存了不少值得回憶的圖片，特別是有些想拿出來(lái)展示給別人，讓別人來(lái)分享自己的快樂。有一種簡(jiǎn)單的方法，就是用網(wǎng)頁(yè)開發(fā)工具Dreamweaver將圖片放在一個(gè)網(wǎng)頁(yè)中，然后發(fā)布到網(wǎng)上就可以。但是這種方法有一個(gè)缺點(diǎn)，就是當(dāng)用戶添加一張新的圖片或者刪除過期的舊圖時(shí)，必須更改頁(yè)面，還要重新發(fā)布，這就顯得特別麻煩。因此，開發(fā)設(shè)計(jì)一個(gè)圖片管理系統(tǒng)來(lái)解決了這個(gè)問題。在圖片管理系統(tǒng)中，應(yīng)用了圖片上傳的技術(shù)，下面給出具體介紹，供大家參考。

1 在ASP.NET中圖片文件上傳的原理及步驟

1.1 選擇本地要上傳到服務(wù)器的文件

ASP.NET具有強(qiáng)大功能，他提供的HTML控制元件，使得可以很容易的通過一個(gè)對(duì)話框來(lái)選擇要上傳的文件。當(dāng)然你的瀏覽器也必須是IE 3.02 或者Netscape 3.0版本或者比這二者版本更高的瀏覽器。通過下列語(yǔ)句就可以完成選擇本地一個(gè)文件的操作：



＜input id = \" loFile \" type = \" file \" runat = \" server \" ＞



1.2 為完成上傳，在Form中不使用缺省編碼

為了成功完成文件上傳操作，在Form中的編碼必須用\" multipart/form-data \" ，而不用From的缺省編碼\" application/x-www-form-urlencoded \"。

具體代碼如下：



＜form method=\"post\" enctype =\"multipart/form-data\" runat=

\"server\"＞

＜/form＞



1.3 獲得上傳的文件名及對(duì)磁盤的操作

為了獲得上傳的文件名稱，必須引入一個(gè)名稱空間(NameSapce)-System.IO。此名稱空間內(nèi)定義了許多關(guān)于文件及磁盤操作的類，在系統(tǒng)中上傳就是通過這些類的一些方法和屬性來(lái)完成一些功能。 

1.3.1 獲得上傳文件的名稱 

獲得上傳文件的名稱，使用Path類中的GetFileName方法，具體實(shí)現(xiàn)如下：



lstrFileName = loFile.PostedFile.FileName



說明：loFile.PostedFile.FileName 返回的是通過文件對(duì)話框選擇的文件名，文件名包含了文件的目錄信息。



lstrFileName = Path.GetFileName ( lstrFileName )



說明：去掉目錄信息，返回文件名稱。

[BT4+*3]1.3.2 判斷上傳目錄的存在

判斷上傳目錄是否存在，不存在就建立。建立目錄要使用到Directory類中的 CreateDirectory 方法；判斷目錄是否存在要用到 Directory 類中的Exists方法。具體實(shí)現(xiàn)如下：



If (not Directory.Exists(lstrFileFolder)) Then

Directory.CreateDirectory ( lstrFileFolder ) 

End If



說明：lstrFileFolder是用戶填入的目錄名稱，或者是缺省的目錄名稱。

1.4 選定文件上傳到服務(wù)器上

在前面操作都已經(jīng)完成以后，就可以上傳文件，上傳文件并不復(fù)雜，用以下語(yǔ)句就可以完成上傳操作。



lstrFileNamePath = lstrFileFolder lstrFileName



說明：得到上傳目錄及文件名稱。



loFile.PostedFile.SaveAs (lstrFileNamePath)



說明：上傳文件到服務(wù)器。

1.5 獲得并顯示上傳文件的屬性



FileName.Text = lstrFileName



說明：獲得文件名稱。



FileType.Text = loFile.PostedFile.ContentType



說明：獲得文件類型。



FileLength.Text=cStr(loFile.PostedFile.ContentLength)



說明：獲得文件長(zhǎng)度。



FileUploadForm.visible = 1 

AnswerMsg.visible = true



說明：顯示上傳文件屬性。

以上就是圖片上傳實(shí)現(xiàn)時(shí)，一些比較重要的技術(shù)與方法。

2 用ASP.NET實(shí)現(xiàn)圖片上傳的方法

ASP.NET實(shí)現(xiàn)圖片的上傳的方法很多，下面介紹幾種：

2.1 單文件上傳

單文件上傳是最基本的文件上傳方法，在ASP.net中沒有FileUpload控件，只有HTML的上傳控件，這時(shí)候要把HTML控件轉(zhuǎn)化為服務(wù)器控件，但很不好用。其實(shí)所有文件上傳的美麗效果都是從這個(gè)FileUpload控件衍生，下面例子雖然簡(jiǎn)單卻是基本的，如圖1所示。

2.2 多文件上傳

多文件上傳是多個(gè)文件上傳的一種方法。如圖2所示。

圖1 單文件上傳示意圖

圖2 多文件上傳示意圖

2.3 客戶端檢查上傳文件類型

客戶端檢查上傳文件類型方法，如圖3所示：

圖3 客戶端檢查上傳文件示意圖

2.4 服務(wù)器端檢查上傳文件類型

服務(wù)器端檢查上傳文件類型方法，如圖4所示：

圖4 服務(wù)器端檢查上傳文件類型示意圖

2.5 服務(wù)器端檢查上傳文件類型及真正文件名

服務(wù)器端檢查上傳文件類型的方法并不好，因?yàn)橛脩艨梢园裍XX.txt偽裝為XXX.jpg，因此要檢測(cè)真正文件名的方法可用下面方法。如圖5所示：

圖5 服務(wù)器端檢查上傳文件(檢測(cè)真正文件名)示意圖

2.6 上傳文件名惟一性處理(時(shí)間戳+SessionID)

上傳文件名惟一性處理的方法是以年月日時(shí)分秒+臨時(shí)session+原文件名方法。如圖6所示：

此外還有上傳圖片生成等比例縮略圖和上傳圖片加水印(文字水印，圖片水印，文字+圖片水印)等方法。[KH-2]

圖6 上傳文件名惟一性處理示意圖

3 實(shí)例說明圖片上傳實(shí)現(xiàn)過程

下面著重介紹一下單文件的圖片上傳，因?yàn)樗亲罨镜纳蟼鞣椒?。其他的上傳方法都是以他為基礎(chǔ)的。以圖片管理系統(tǒng)的圖片上傳為例，說明圖片上傳實(shí)現(xiàn)過程。

3.1 圖片管理系統(tǒng)上傳界面

圖片管理系統(tǒng)中的圖片上傳操作界面如圖7所示：

圖7 文件上傳操作界面示意圖

3.2 上傳圖片源代碼

首先，來(lái)討論upload.ascx用戶控件的頁(yè)面源代碼，該頁(yè)面包含一個(gè)Form，里面是一個(gè)文件選取的file控件和一個(gè)上傳文件的確定按鈕。

3.2.1 前臺(tái)代碼

源代碼：upload.ascx



＜%@ Control Language=\"vb\" AutoEventWireup=\"1\" Codebehind

0=\"upload.ascx.vb\" 

Inherits=\"pic.upload\" TargetSchema=\"http://schemas.microsoft.com

/intellisense/ie5\" %＞

＜form enctype=\"multipart/form-data\" runat=\"server\" ID=\"Form1\"＞

＜div id=\"main\" runat=\"server\" align=\"center\"＞

＜table width=\"100%\" cellpadding=\"4\" bgcolor=\"#99ccff\"＞

＜tr＞

＜td v align=\"top\" width=\"100%\" align=\"middle\"＞

＜span id=\"upSpan\" runat=\"server\"＞＜FONT face=\"宋體\"＞＜/FONT＞

＜/span＞＜input type=\"file\" id=\"filename\" runat=\"server\"＞

＜asp:Button id=\"uploadBtn\" runat=\"server\" OnClick=\"upload-Btn[CD#*2]Click\"＞

＜/asp:Button＞

＜/td＞

＜/tr＞

＜/table＞

＜/div＞

＜div align=\"center\" id=\"pageerr\" runat=\"server\"＞＜/div＞

＜/form＞



3.2.2 后臺(tái)代碼

源代碼：upload.ascx.vb

′加載文件操作的IO類，以及定義該頁(yè)面控件



Imports System.IO

Public MustInherit Class upload

Inherits System.Web.UI.UserControl

Protected WithEvents filename As System.Web.UI.Html

Controls.

HtmlInputFile

Protected WithEvents upSpan As System.Web.UI.Html

Controls.

HtmlGenericControl

Protected WithEvents uploadBtn As System.Web.UI.Web

Controls.

Button

Protected WithEvents main As System.Web.UI.Html

Controls.

HtmlGenericControl

Protected WithEvents pageerr As System.Web.UI.Html

Controls.

HtmlGenericControl

Public filesize As Int32 = 500

Public uploadText As String = \"上傳文件：\"

Public submitText As String = \"上傳文件\"

Public uploadFolder As String = \"upload\"



該用戶控件的Pag[CD#*2]Load()方法，處理頁(yè)面加載事件。該方法中設(shè)置2個(gè)控件的文本屬性。



Private Sub Page[CD#*2]Load(ByVal sender As System.Object，ByVal e As System.EventArgs) Handles MyBase.Load

′在此處放置初始化頁(yè)的用戶代碼

upSpan.InnerText = uploadText

uploadBtn.Text = submitText

End Sub

(1) uploadBtn[CD#*2]Click( )方法

用uploadBtn[CD#*2]Click()方法處理文件的上傳操作。首先獲得文件的擴(kuò)展名，然后判斷該文件的擴(kuò)展和文件大小是否合法。如果合法，則用年、月、日、小時(shí)、分和秒的組合來(lái)定義保存文件的名字，然后上傳文件到服務(wù)器上，并且給出成功的提示。



Public Sub uploadBtn[CD#*2]Click(ByVal sender As System.Object，ByVal e As

System.EventArgs) Handles uploadBtn.Click

If Not filename.PostedFile Is Nothing Then

Dim sPath As String = Server.MapPath(uploadFolder \"\\\")

Try

′這里是獲得文件的擴(kuò)展名

Dim sfiletype As String

Dim fs As New FileInfo(filename.PostedFile.FileName)

sfiletype = fs.Extension.ToString

′文件擴(kuò)展名活得結(jié)束

If chetype(filename.PostedFile.ContentType，filename.

PostedFile.ContentLength) = 2 Then

Dim savename As String 

savename = Year(Now) Month(Now) Day(Now) Hour(Now) 

Minute(Now) Second(Now) fs.Extension

filename.PostedFile.SaveAs(sPath + savename) 

main.Visible = False

pageerr.InnerHtml = \"上傳成功.＜br＞＜a href=upload.aspx＞

重新上傳＜/a＞\"

pageerr.InnerHtml += \"＜font size=2＞圖片上傳成功，請(qǐng)copy

下邊的圖片路徑，以備后用＜/font＞＜br＞\"

pageerr.InnerHtml += uploadFolder + \"/\" + savename

′如果文件擴(kuò)展名或文件大小不滿足條件，根據(jù)錯(cuò)誤給出不同的提示

Else

main.Visible = False

Select Case chetype(filename.PostedFile.ContentType，file-

name.PostedFile.ContentLength)

Case 0

pageerr.InnerHtml = \"你沒有選擇文件＜br＞＜a href=upload.

aspx＞重新上傳＜/a＞\"

Case 3

pageerr.InnerHtml = \"你的文件格式錯(cuò)誤＜br＞＜a href=upload.

aspx＞重新上傳＜/a＞\"

Case 1

pageerr.InnerHtml = \"文件超過最大限度\" filesize \"＜br＞

＜a href=upload.aspx＞重新上傳＜/a＞\"

Case Else

pageerr.InnerHtml = \"上傳文件錯(cuò)誤＜br＞＜a href=upload.

aspx＞重新上傳＜/a＞\"

End Select

End If

Catch d As Exception

main.Visible = False

pageerr.InnerHtml = \"上傳文件錯(cuò)誤＜br＞，請(qǐng)?jiān)O(shè)置你的上傳文件夾\" + uploadFolder + \"的權(quán)限，加入ASP.NET用戶，并設(shè)置為允許寫?yīng)?/p>

入＜br＞\" + e.ToString

End Try

End If

End Sub



(2) Chetype( )方法

Chetype()方法，對(duì)文件類型和文件的大小進(jìn)行判斷。如果文件類型為空或文件大小為0。如果文件是jpg、gif、bmp等，或者文件小于500KB，則返回2，說明通過檢測(cè)。



Public Function chetype(Optional ByVal filetype As String = \"\"，Optional ByVal fsize As Int32 = 0) As Int32

Dim su As Int32 = 0

If filetype = \"\" Or fsize = 0 Then

Return su ′文件為空

End If

Select Case filetype

Case \"image/gif\"

su = 1

Case \"image/jpg\"

su = 1

Case \"image/bmp\"

su = 1

Case \"application/x-zip-compressed\"

su = 1

Case \"application/octet-stream\"

su = 1

Case Else

su = 3 ′格式錯(cuò)誤

End Select

If su = 1 Then ′大小錯(cuò)誤

If CInt(filename.PostedFile.ContentLength \\ 1024) ＜

filesize Then

su = 2 ′驗(yàn)證通過

End If

End If

Return su

End Function

End Class



3.3 圖片上傳運(yùn)行的結(jié)果

上面程序運(yùn)行后得到的結(jié)果如圖8所示：

圖8 圖片上傳運(yùn)行的結(jié)果示意圖

通過以上的例子可以了解到圖片上傳過程中的前臺(tái)代碼和后臺(tái)代碼以及如何實(shí)現(xiàn)圖片上傳的整個(gè)過程。

參 考 文 獻(xiàn)

［1］[美] Chris Goode John Kauffman.ASP.NET 1.1入門經(jīng)典［M］.康博，譯.北京:清華大學(xué)出版社，2002.

［2］石志國(guó)，劉冬梅，陳上.ASP.NET應(yīng)用教程［M］.北京:清華大學(xué)出版社，2005.

［3］楊帆，趙義霞，趙立臻.ASP.NET技術(shù)與應(yīng)用［M］.北京:高等教育出版社，2003.

［4］郝剛.ASP.NET 2.0 開發(fā)指南［M］.北京:人民郵電出版社，2006.

［5］王健南.ASP.NET 網(wǎng)絡(luò)辦公項(xiàng)目解決方案精解［M］.北京:航空工業(yè)出版社，2006.

［6］石磊，但正剛.ASP.NET數(shù)據(jù)庫(kù)編程詳解［M］.北京:高等教育出版社，2004.

［7］[美] Konrad King.SQL編程實(shí)用大全(精華版)［M］.杜大鵬，龔小平，史艷輝，等譯. 北京:中國(guó)水利水電出版社，2005.

［8］Greg Buczek.ASP.NET Tips Techniques.McGraw-Hill.2003.

［9］東方人華.SQL Server 2000與Visual Basic.NET數(shù)據(jù)庫(kù)入門與提高［M］.北京:清華大學(xué)出版社，2002.

［10］陳嫻，劉志寶，李岱.ASP.NET項(xiàng)目開發(fā)實(shí)踐［M］.2版.北京:中國(guó)鐵道出版社，2005.

［11］[意] Dino Esposito.精通ASP.NET程序設(shè)計(jì)［M］.羅兵，顧雁宏，詹文軍，譯.北京:清華大學(xué)出版社，2006.

［12］陳峰棋.深入淺出ASP.NET程序設(shè)計(jì)［M］.北京:中國(guó)水利出版社，2005.

作者簡(jiǎn)介

劉 翼 男，1982年出生，助教，2003年畢業(yè)于延安大學(xué)。主要研究方向?yàn)榫W(wǎng)絡(luò)應(yīng)用、軟件工程、計(jì)算機(jī)應(yīng)用等。葉 倩 女，1982年出生， 2004年畢業(yè)于西安空軍工程大學(xué)。主要研究方向?yàn)檐浖こ獭⒂?jì)算機(jī)應(yīng)用。

注：本文中所涉及到的圖表、注解、公式等內(nèi)容請(qǐng)以PDF格式閱讀原文。