基于ＡＳＰ．ＮＥＴ的圖片上傳技術

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

關鍵詞：ASP.NET；圖片上傳；GetFileName方法

中圖分類號：TP391 文獻標識碼：B

文章編號：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

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

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

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

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



＜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 獲得上傳的文件名及對磁盤的操作

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

1.3.1 獲得上傳文件的名稱 

獲得上傳文件的名稱，使用Path類中的GetFileName方法，具體實現如下：



lstrFileName = loFile.PostedFile.FileName



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



lstrFileName = Path.GetFileName ( lstrFileName )



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

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

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



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

Directory.CreateDirectory ( lstrFileFolder ) 

End If



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

1.4 選定文件上傳到服務器上

在前面操作都已經完成以后，就可以上傳文件，上傳文件并不復雜，用以下語句就可以完成上傳操作。



lstrFileNamePath = lstrFileFolder lstrFileName



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



loFile.PostedFile.SaveAs (lstrFileNamePath)



說明：上傳文件到服務器。

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



FileName.Text = lstrFileName



說明：獲得文件名稱。



FileType.Text = loFile.PostedFile.ContentType



說明：獲得文件類型。



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



說明：獲得文件長度。



FileUploadForm.visible = 1 

AnswerMsg.visible = true



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

以上就是圖片上傳實現時，一些比較重要的技術與方法。

2 用ASP.NET實現圖片上傳的方法

ASP.NET實現圖片的上傳的方法很多，下面介紹幾種：

2.1 單文件上傳

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

2.2 多文件上傳

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

圖1 單文件上傳示意圖

圖2 多文件上傳示意圖

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

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

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

2.4 服務器端檢查上傳文件類型

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

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

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

服務器端檢查上傳文件類型的方法并不好，因為用戶可以把XXX.txt偽裝為XXX.jpg，因此要檢測真正文件名的方法可用下面方法。如圖5所示：

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

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

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

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

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

3 實例說明圖片上傳實現過程

下面著重介紹一下單文件的圖片上傳，因為他是最基本的上傳方法。其他的上傳方法都是以他為基礎的。以圖片管理系統的圖片上傳為例，說明圖片上傳實現過程。

3.1 圖片管理系統上傳界面

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

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

3.2 上傳圖片源代碼

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

3.2.1 前臺代碼

源代碼：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 后臺代碼

源代碼：upload.ascx.vb

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



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()方法，處理頁面加載事件。該方法中設置2個控件的文本屬性。



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

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

upSpan.InnerText = uploadText

uploadBtn.Text = submitText

End Sub

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

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



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

′這里是獲得文件的擴展名

Dim sfiletype As String

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

sfiletype = fs.Extension.ToString

′文件擴展名活得結束

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＞圖片上傳成功，請copy

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

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

′如果文件擴展名或文件大小不滿足條件，根據錯誤給出不同的提示

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 = \"你的文件格式錯誤＜br＞＜a href=upload.

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

Case 1

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

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

Case Else

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

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

End Select

End If

Catch d As Exception

main.Visible = False

pageerr.InnerHtml = \"上傳文件錯誤＜br＞，請設置你的上傳文件夾\" + uploadFolder + \"的權限，加入ASP.NET用戶，并設置為允許寫

入＜br＞\" + e.ToString

End Try

End If

End Sub



(2) Chetype( )方法

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



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 ′格式錯誤

End Select

If su = 1 Then ′大小錯誤

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

filesize Then

su = 2 ′驗證通過

End If

End If

Return su

End Function

End Class



3.3 圖片上傳運行的結果

上面程序運行后得到的結果如圖8所示：

圖8 圖片上傳運行的結果示意圖

通過以上的例子可以了解到圖片上傳過程中的前臺代碼和后臺代碼以及如何實現圖片上傳的整個過程。

參 考 文 獻

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

［2］石志國，劉冬梅，陳上.ASP.NET應用教程［M］.北京:清華大學出版社，2005.

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

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

［5］王健南.ASP.NET 網絡辦公項目解決方案精解［M］.北京:航空工業出版社，2006.

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

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

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

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

［10］陳嫻，劉志寶，李岱.ASP.NET項目開發實踐［M］.2版.北京:中國鐵道出版社，2005.

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

［12］陳峰棋.深入淺出ASP.NET程序設計［M］.北京:中國水利出版社，2005.

作者簡介

劉 翼 男，1982年出生，助教，2003年畢業于延安大學。主要研究方向為網絡應用、軟件工程、計算機應用等。葉 倩 女，1982年出生， 2004年畢業于西安空軍工程大學。主要研究方向為軟件工程、計算機應用。

注：本文中所涉及到的圖表、注解、公式等內容請以PDF格式閱讀原文。