[轉貼] 使用 jQuery.uploadify 上傳檔案

今天在找asp.net 的上傳進度條方法，偶然看到了jQuery的uploadify上傳套件

看了一下Demo感覺還不錯，馬上試了一下，下面開始實做 asp.net 配上 jQuery.uploadify

jQuery.uploadify 官網: http://www.uploadify.com/

jQuery.uploadify 文件: http://www.uploadify.com/documentation/

jQuery.uploadify Dome: http://www.uploadify.com/demos/

首先去關網先下載套件檔案，看到已經有 3.0 Beta 版，不過我還是先用 2.1.4 版。

下載解壓縮後檔案如下:

裡面有個php的Demo樣子，不過我不懂php...忽略他，只把需要用的檔案抓出來。

接下來把這些檔案複製到您的專案底下，還需要有 jquery-1.3.2.js

在來要建立兩個頁面 Default.aspx / ajaxUpload.aspx

Default.aspx : 放置上傳控制項的頁面，不需要寫後置程式碼

ajaxUpload.aspx : ajax呼叫後處理檔案上傳動做的網頁，只需要寫後置程式碼就好

下面就是範例:

Default.aspx

---

ajaxUpload.aspx

ajaxUpload.aspx.vb

view source

print?

001	Partial Class formobj_AjaxUpload

002	Inherits System.Web.UI.Page

003

004	Dim _filePlace As String = "~/FileSystem/"    '檔案存放位置

005	Dim _fileMaxSize As Integer = 1024 '檔案大小上限(KB)

006	Dim _fileAgreeType() As String = {".png", ".jpg", ".gif"}  '可上傳之檔案類型

007

008	Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

009	Dim result As String = ""

010	If IsPostFile() Then

011	result = SaveRequestFiles()

012

End If

013	Response.Write(result)

014

End Sub

015

016	'判斷是否有需上傳的檔案

017	Public Shared Function IsPostFile() As Boolean

018	For i As Integer = 0 To HttpContext.Current.Request.Files.Count

019	If HttpContext.Current.Request.Files(i).FileName <> "" Then

020	Return True

021

End If

022

Next

023	Return False

024	End Function

025

026	'檢查檔案格式是否符合要求

027	Private Function CheckFileExt(ByVal _fileExt As String) As Boolean

028	Dim fileAllow As Boolean = False   '旗標

029	For i As Integer = 0 To _fileAgreeType.Length - 1

030	If _fileExt = _fileAgreeType(i) Then

031	fileAllow = True

032

Exit For

033

End If

034

Next

035	If fileAllow Then

036	Return True

037

Else

038	Return False

039

End If

040	End Function

041

042

'

043	'檢查檔案大小是否超過限制

044	Private Function CheckFileSize(ByVal _fileSize As String) As Boolean

045	If (_fileSize / 1024) > _fileMaxSize Then

046	Return False

047

Else

048	Return True

049

End If

050	End Function

051

052

'儲存上傳的檔案

053	Public Function SaveRequestFiles() As String

054	Dim result As String = ""

055	Dim fCount As Integer = HttpContext.Current.Request.Files.Count

056	For i As Integer = 0 To fCount - 1

057

'取得檔案資訊

058	Dim file As New System.IO.FileInfo(HttpContext.Current.Request.Files(i).FileName)

059

'取得檔案名稱

060	Dim fileName As String = file.Name

061

'取得檔案附檔名

062	Dim fileExtension As String = file.Extension.ToLower()

063

'取得檔案類型

064	Dim fileType As String = HttpContext.Current.Request.Files(i).ContentType.ToLower()

065

'取得檔案大小

066	Dim fileSize As Integer = HttpContext.Current.Request.Files(i).ContentLength

067	'設定新日期檔案名稱

068	Dim tmpFileName As String = ""

069

070

'檢查檔案大小

071	If CheckFileSize(fileSize) Then

072

'檢查檔案格式

073	If CheckFileExt(fileExtension) Then

074

'取得檔案真實路徑

075	Dim UploadDir As String = HttpContext.Current.Server.MapPath(_filePlace)

076

'設定年份目錄

077	Dim saveDir As String = DateTime.Now.ToString("yyyy") & "/"

078

079	'建立新檔案完整名稱

080	tmpFileName = DateTime.Now.ToString("yyyyMMddhhmmss") & fileExtension

081

082

'建立檔案檢查路徑

083	Dim fileToCheck As String = _filePlace & saveDir & tmpFileName

084

085	'檢查檔案是否從重複

086	If System.IO.File.Exists(fileToCheck) Then

087	Dim count As Integer = 2

088	While System.IO.File.Exists(fileToCheck) '

089	tmpFileName = DateTime.Now.ToString("yyyyMMddhhmmss") & fileExtension

090	fileToCheck = _filePlace & saveDir & tmpFileName

091	count = count + 1

092

End While

093

End If

094

095	'檢查目錄是否存在，不存在則建立目錄

096	If Not System.IO.Directory.Exists(UploadDir & saveDir) Then

097	System.IO.Directory.CreateDirectory(UploadDir & saveDir)

098

End If

099

'儲存檔案

100	HttpContext.Current.Request.Files(i).SaveAs(UploadDir & saveDir & tmpFileName)

101

'回傳檔案路徑

102	result = _filePlace & saveDir & tmpFileName

103

Else

104	'result = "檔案格式不符合"

105	result = "1"

106

End If

107

Else

108	'result = "檔案大小超過限制"

109	result = "0"

110

End If

111

Next

112	Return result

113	End Function

114

115

End Class

完成之後就是以下畫面: