今天在找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
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 |
完成之後就是以下畫面:
