使用 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
Partial Class formobj_AjaxUpload
Inherits System.Web.UI.Page
Dim _filePlace As String = "~/FileSystem/" '檔案存放位置
Dim _fileMaxSize As Integer = 1024 '檔案大小上限(KB)
Dim _fileAgreeType() As String = {".png", ".jpg", ".gif"} '可上傳之檔案類型
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim result As String = ""
If IsPostFile() Then
result = SaveRequestFiles()
End If
Response.Write(result)
End Sub
'判斷是否有需上傳的檔案
Public Shared Function IsPostFile() As Boolean
For i As Integer = 0 To HttpContext.Current.Request.Files.Count
If HttpContext.Current.Request.Files(i).FileName <> "" Then
Return True
End If
Next
Return False
End Function
'檢查檔案格式是否符合要求
Private Function CheckFileExt(ByVal _fileExt As String) As Boolean
Dim fileAllow As Boolean = False '旗標
For i As Integer = 0 To _fileAgreeType.Length - 1
If _fileExt = _fileAgreeType(i) Then
fileAllow = True
Exit For
End If
Next
If fileAllow Then
Return True
Else
Return False
End If
End Function
'
'檢查檔案大小是否超過限制
Private Function CheckFileSize(ByVal _fileSize As String) As Boolean
If (_fileSize / 1024) > _fileMaxSize Then
Return False
Else
Return True
End If
End Function
'儲存上傳的檔案
Public Function SaveRequestFiles() As String
Dim result As String = ""
Dim fCount As Integer = HttpContext.Current.Request.Files.Count
For i As Integer = 0 To fCount - 1
'取得檔案資訊
Dim file As New System.IO.FileInfo(HttpContext.Current.Request.Files(i).FileName)
'取得檔案名稱
Dim fileName As String = file.Name
'取得檔案附檔名
Dim fileExtension As String = file.Extension.ToLower()
'取得檔案類型
Dim fileType As String = HttpContext.Current.Request.Files(i).ContentType.ToLower()
'取得檔案大小
Dim fileSize As Integer = HttpContext.Current.Request.Files(i).ContentLength
'設定新日期檔案名稱
Dim tmpFileName As String = ""
'檢查檔案大小
If CheckFileSize(fileSize) Then
'檢查檔案格式
If CheckFileExt(fileExtension) Then
'取得檔案真實路徑
Dim UploadDir As String = HttpContext.Current.Server.MapPath(_filePlace)
'設定年份目錄
Dim saveDir As String = DateTime.Now.ToString("yyyy") & "/"
'建立新檔案完整名稱
tmpFileName = DateTime.Now.ToString("yyyyMMddhhmmss") & fileExtension
'建立檔案檢查路徑
Dim fileToCheck As String = _filePlace & saveDir & tmpFileName
'檢查檔案是否從重複
If System.IO.File.Exists(fileToCheck) Then
Dim count As Integer = 2
While System.IO.File.Exists(fileToCheck) '
tmpFileName = DateTime.Now.ToString("yyyyMMddhhmmss") & fileExtension
fileToCheck = _filePlace & saveDir & tmpFileName
count = count + 1
End While
End If
'檢查目錄是否存在，不存在則建立目錄
If Not System.IO.Directory.Exists(UploadDir & saveDir) Then
System.IO.Directory.CreateDirectory(UploadDir & saveDir)
End If
'儲存檔案
HttpContext.Current.Request.Files(i).SaveAs(UploadDir & saveDir & tmpFileName)
'回傳檔案路徑
result = _filePlace & saveDir & tmpFileName
Else
'result = "檔案格式不符合"
result = "1"
End If
Else
'result = "檔案大小超過限制"
result = "0"
End If
Next
Return result
End Function
End Class完成之後就是以下畫面:
本編為紀錄使用過的方式，如有錯誤請多指教 :)
以上文章敘述如有錯誤及觀念不正確，請不吝嗇指教
如有侵權內容也請您與我反應～謝謝您 :)
