Y大叔的筆記

年過40歲記不住了

2008-05-12

[ASP.NET小技巧]上傳多檔案

摘要:[ASP.NET小技巧]上傳多檔案

 

新增一個Web使用者控制項
 

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="MultipleFileUpload.ascx.vb" Inherits="多檔案上傳_UserControl_MultipleFileUpload" %>
<asp:Panel ID="pnlParent" runat="server" Width="300px" BorderColor="Black" BorderWidth="1px"
    BorderStyle="Solid">
    <asp:Panel ID="pnlFiles" runat="server" Width="300px" HorizontalAlign="Left">
        <asp:FileUpload ID="IpFile" runat="server" />
    </asp:Panel>
    <asp:Panel ID="pnlListBox" runat="server" Width="292px" BorderStyle="Inset">
    </asp:Panel>
    <asp:Panel ID="pnlButton" runat="server" Width="300px" HorizontalAlign="Right">
        <input id="btnAdd" onclick="javascript:Add();" style="width: 60px" type="button"
            runat="server" value="Add" />
        <input id="btnClear" onclick="javascript:Clear();" style="width: 60px" type="button"
            value="Clear" runat="server" />
        <asp:Button ID="btnUpload" OnClientClick="javascript:return DisableTop();" runat="server"
            Text="Upload" Width="60px" OnClick="btnUpload_Click" />
        <br />
        <asp:Label ID="lblCaption" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="XX-Small"
            ForeColor="Gray"></asp:Label>&nbsp;
    </asp:Panel>
</asp:Panel>

 


Partial Class 多檔案上傳_UserControl_MultipleFileUpload
    Inherits System.Web.UI.UserControl

    Public Event Click As MultipleFileUploadClick
    Private _Rows As Integer = 6
    Public Property Rows() As Integer
    
        Get
            Return _Rows
        End Get
        Set(ByVal value As Integer)
            _Rows = IIf(value < 6, 6, value)
        End Set
    End Property
    Private _UpperLimit As Integer = 0
    Public Property UpperLimit() As Integer
        Get
            Return _UpperLimit
        End Get
        Set(ByVal value As Integer)
            _UpperLimit = value
        End Set
    End Property

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        lblCaption.Text = IIf(_UpperLimit = 0, "Maximum Files: No Limit", String.Format("Maximum Files: {0}", _UpperLimit))
        pnlListBox.Attributes("style") = "overflow:auto;"
        pnlListBox.Height = Unit.Pixel(20 * _Rows - 1)
        Page.ClientScript.RegisterStartupScript(GetType(Page), "MyScript", GetJavaScript())
    End Sub

    Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnUpload.Click

        RaiseEvent Click(Me, New FileCollectionEventArgs(Me.Request))

    End Sub
    Private Function GetJavaScript() As String
        Dim JavaScript As New StringBuilder()

        JavaScript.Append("<script type='text/javascript'>")
        JavaScript.Append("var Id = 0;" & Chr(10) & "")
        JavaScript.AppendFormat("var MAX = {0};" & Chr(10) & "", _UpperLimit)
        JavaScript.AppendFormat("var DivFiles = document.getElementById('{0}');" & Chr(10) & "", pnlFiles.ClientID)
        JavaScript.AppendFormat("var DivListBox = document.getElementById('{0}');" & Chr(10) & "", pnlListBox.ClientID)
        JavaScript.AppendFormat("var BtnAdd = document.getElementById('{0}');" & Chr(10) & "", btnAdd.ClientID)
        JavaScript.Append("function Add()")
        JavaScript.Append("{" & Chr(10) & "")
        JavaScript.Append("var IpFile = GetTopFile();" & Chr(10) & "")
        JavaScript.Append("if(IpFile == null || IpFile.value == null || IpFile.value.length == 0)" & Chr(10) & "")
        JavaScript.Append("{" & Chr(10) & "")
        JavaScript.Append("alert('Please select a file to add.');" & Chr(10) & "")
        JavaScript.Append("return;" & Chr(10) & "")
        JavaScript.Append("}" & Chr(10) & "")
        JavaScript.Append("var NewIpFile = CreateFile();" & Chr(10) & "")
        JavaScript.Append("DivFiles.insertBefore(NewIpFile,IpFile);" & Chr(10) & "")
        JavaScript.Append("if(MAX != 0 && GetTotalFiles() - 1 == MAX)" & Chr(10) & "")
        JavaScript.Append("{" & Chr(10) & "")
        JavaScript.Append("NewIpFile.disabled = true;" & Chr(10) & "")
        JavaScript.Append("BtnAdd.disabled = true;" & Chr(10) & "")
        JavaScript.Append("}" & Chr(10) & "")
        JavaScript.Append("IpFile.style.display = 'none';" & Chr(10) & "")
        JavaScript.Append("DivListBox.appendChild(CreateItem(IpFile));" & Chr(10) & "")
        JavaScript.Append("}" & Chr(10) & "")
        JavaScript.Append("function CreateFile()")
        JavaScript.Append("{" & Chr(10) & "")
        JavaScript.Append("var IpFile = document.createElement('input');" & Chr(10) & "")
        JavaScript.Append("IpFile.id = IpFile.name = 'IpFile_' + Id++;" & Chr(10) & "")
        JavaScript.Append("IpFile.type = 'file';" & Chr(10) & "")
        JavaScript.Append("return IpFile;" & Chr(10) & "")
        JavaScript.Append("}" & Chr(10) & "")
        JavaScript.Append("function CreateItem(IpFile)" & Chr(10) & "")
        JavaScript.Append("{" & Chr(10) & "")
        JavaScript.Append("var Item = document.createElement('div');" & Chr(10) & "")
        JavaScript.Append("Item.style.backgroundColor = '#ffffff';" & Chr(10) & "")
        JavaScript.Append("Item.style.fontWeight = 'normal';" & Chr(10) & "")
        JavaScript.Append("Item.style.textAlign = 'left';" & Chr(10) & "")
        JavaScript.Append("Item.style.verticalAlign = 'middle'; " & Chr(10) & "")
        JavaScript.Append("Item.style.cursor = 'default';" & Chr(10) & "")
        JavaScript.Append("Item.style.height = 20 + 'px';" & Chr(10) & "")
        JavaScript.Append("var Splits = IpFile.value.split('\\');" & Chr(10) & "")
        JavaScript.Append("Item.innerHTML = Splits[Splits.length - 1] + '&nbsp;';" & Chr(10) & "")
        JavaScript.Append("Item.value = IpFile.id;" & Chr(10) & "")
        JavaScript.Append("Item.title = IpFile.value;" & Chr(10) & "")
        JavaScript.Append("var A = document.createElement('a');" & Chr(10) & "")
        JavaScript.Append("A.innerHTML = 'Delete';" & Chr(10) & "")
        JavaScript.Append("A.id = 'A_' + Id++;" & Chr(10) & "")
        JavaScript.Append("A.href = '#';" & Chr(10) & "")
        JavaScript.Append("A.style.color = 'blue';" & Chr(10) & "")
        JavaScript.Append("A.onclick = function()" & Chr(10) & "")
        JavaScript.Append("{" & Chr(10) & "")
        JavaScript.Append("DivFiles.removeChild(document.getElementById(this.parentNode.value));" & Chr(10) & "")
        JavaScript.Append("DivListBox.removeChild(this.parentNode);" & Chr(10) & "")
        JavaScript.Append("if(MAX != 0 && GetTotalFiles() - 1 < MAX)" & Chr(10) & "")
        JavaScript.Append("{" & Chr(10) & "")
        JavaScript.Append("GetTopFile().disabled = false;" & Chr(10) & "")
        JavaScript.Append("BtnAdd.disabled = false;" & Chr(10) & "")
        JavaScript.Append("}" & Chr(10) & "")
        JavaScript.Append("}" & Chr(10) & "")
        JavaScript.Append("Item.appendChild(A);" & Chr(10) & "")
        JavaScript.Append("Item.onmouseover = function()" & Chr(10) & "")
        JavaScript.Append("{" & Chr(10) & "")
        JavaScript.Append("Item.bgColor = Item.style.backgroundColor;" & Chr(10) & "")
        JavaScript.Append("Item.fColor = Item.style.color;" & Chr(10) & "")
        JavaScript.Append("Item.style.backgroundColor = '#C6790B';" & Chr(10) & "")
        JavaScript.Append("Item.style.color = '#ffffff';" & Chr(10) & "")
        JavaScript.Append("Item.style.fontWeight = 'bold';" & Chr(10) & "")
        JavaScript.Append("}" & Chr(10) & "")
        JavaScript.Append("Item.onmouseout = function()" & Chr(10) & "")
        JavaScript.Append("{" & Chr(10) & "")
        JavaScript.Append("Item.style.backgroundColor = Item.bgColor;" & Chr(10) & "")
        JavaScript.Append("Item.style.color = Item.fColor;" & Chr(10) & "")
        JavaScript.Append("Item.style.fontWeight = 'normal';" & Chr(10) & "")
        JavaScript.Append("}" & Chr(10) & "")
        JavaScript.Append("return Item;" & Chr(10) & "")
        JavaScript.Append("}" & Chr(10) & "")
        JavaScript.Append("function Clear()" & Chr(10) & "")
        JavaScript.Append("{" & Chr(10) & "")
        JavaScript.Append("DivListBox.innerHTML = '';" & Chr(10) & "")
        JavaScript.Append("DivFiles.innerHTML = '';" & Chr(10) & "")
        JavaScript.Append("DivFiles.appendChild(CreateFile());" & Chr(10) & "")
        JavaScript.Append("BtnAdd.disabled = false;" & Chr(10) & "")
        JavaScript.Append("}" & Chr(10) & "")
        JavaScript.Append("function GetTopFile()" & Chr(10) & "")
        JavaScript.Append("{" & Chr(10) & "")
        JavaScript.Append("var Inputs = DivFiles.getElementsByTagName('input');" & Chr(10) & "")
        JavaScript.Append("var IpFile = null;" & Chr(10) & "")
        JavaScript.Append("for(var n = 0; n < Inputs.length && Inputs[n].type == 'file'; ++n)" & Chr(10) & "")
        JavaScript.Append("{" & Chr(10) & "")
        JavaScript.Append("IpFile = Inputs[n];" & Chr(10) & "")
        JavaScript.Append("break;" & Chr(10) & "")
        JavaScript.Append("}" & Chr(10) & "")
        JavaScript.Append("return IpFile;" & Chr(10) & "")
        JavaScript.Append("}" & Chr(10) & "")
        JavaScript.Append("function GetTotalFiles()" & Chr(10) & "")
        JavaScript.Append("{" & Chr(10) & "")
        JavaScript.Append("var Inputs = DivFiles.getElementsByTagName('input');" & Chr(10) & "")
        JavaScript.Append("var Counter = 0;" & Chr(10) & "")
        JavaScript.Append("for(var n = 0; n < Inputs.length && Inputs[n].type == 'file'; ++n)" & Chr(10) & "")
        JavaScript.Append("Counter++;" & Chr(10) & "")
        JavaScript.Append("return Counter;" & Chr(10) & "")
        JavaScript.Append("}" & Chr(10) & "")
        JavaScript.Append("function GetTotalItems()" & Chr(10) & "")
        JavaScript.Append("{" & Chr(10) & "")
        JavaScript.Append("var Items = DivListBox.getElementsByTagName('div');" & Chr(10) & "")
        JavaScript.Append("return Items.length;" & Chr(10) & "")
        JavaScript.Append("}" & Chr(10) & "")
        JavaScript.Append("function DisableTop()"
End Class


Public Class FileCollectionEventArgs
    Inherits EventArgs
    Private _HttpRequest As HttpRequest

    Public ReadOnly Property PostedFiles() As HttpFileCollection
        Get
            Return _HttpRequest.Files
        End Get
    End Property

    Public ReadOnly Property Count() As Integer
        Get
            Return _HttpRequest.Files.Count
        End Get
    End Property

    Public ReadOnly Property HasFiles() As Boolean
        Get
            Return IIf(_HttpRequest.Files.Count > 0, True, False)
        End Get
    End Property

    Public ReadOnly Property TotalSize() As Double
        Get
            Dim Size As Double = 0
            For n As Integer = 0 To _HttpRequest.Files.Count - 1
                If _HttpRequest.Files(n).ContentLength < 0 Then
                    Continue For
                Else
                    Size += _HttpRequest.Files(n).ContentLength
                End If
            Next

            Return Math.Round(Size / 1024, 2)
        End Get
    End Property

    Public Sub New(ByVal oHttpRequest As HttpRequest)
        _HttpRequest = oHttpRequest
    End Sub
End Class

Public Delegate Sub MultipleFileUploadClick(ByVal sender As Object, ByVal e As FileCollectionEventArgs) & Chr(10) & "")
        JavaScript.Append("{" & Chr(10) & "")
        JavaScript.Append("if(GetTotalItems() == 0)" & Chr(10) & "")
        JavaScript.Append("{" & Chr(10) & "")
        JavaScript.Append("alert('Please browse at least one file to upload.');" & Chr(10) & "")
        JavaScript.Append("return false;" & Chr(10) & "")
        JavaScript.Append("}" & Chr(10) & "")
        JavaScript.Append("GetTopFile().disabled = true;" & Chr(10) & "")
        JavaScript.Append("return true;" & Chr(10) & "")
        JavaScript.Append("}" & Chr(10) & "")
        JavaScript.Append("</script>")

        Return JavaScript.ToString()
    End Function

Default.aspx
 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="多檔案上傳_Default" %>

<%@ Register Src="UserControl/MultipleFileUpload.ascx" TagName="MultipleFileUpload"
    TagPrefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>未命名頁面</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <uc1:MultipleFileUpload ID="MultipleFileUpload1" runat="server" />
    
    </div>
    </form>
</body>
</html>

 


Partial Class 多檔案上傳_Default
    Inherits System.Web.UI.Page

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

    End Sub

    Protected Sub MultipleFileUpload1_Click(ByVal sender As Object, ByVal e As FileCollectionEventArgs) Handles MultipleFileUpload1.Click
        Dim oHttpFileCollection As HttpFileCollection = e.PostedFiles
        Dim oHttpPostedFile As HttpPostedFile = Nothing
        If e.HasFiles Then
            For n As Integer = 0 To e.Count - 1
                oHttpPostedFile = oHttpFileCollection(n)
                If oHttpPostedFile.ContentLength <= 0 Then
                    Continue For
                Else
                    oHttpPostedFile.SaveAs(Server.MapPath("Files") + "\" + System.IO.Path.GetFileName(oHttpPostedFile.FileName))
                End If
            Next
        End If
    End Sub
End Class

多檔案上傳.rar

標籤雲

系列文章