2013年9月4日 星期三

[轉貼] 使用 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

001Partial 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 ObjectByVal 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 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 StringAs Boolean
028        Dim fileAllow As Boolean False   '旗標
029        For 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 StringAs 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 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  
115End Class
完成之後就是以下畫面:

沒有留言:

張貼留言