使用ASP.NET上传多个文件到服务器-优快云博客

本文介绍了一个多文件上传的实现方案，通过JavaScript动态添加file元素到表单，限制最大上传文件数量，并提供添加和删除文件的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Email系统中经常会上传多个文件到服务器，用户大多习惯一次上传所有的文件，而不是逐个上传，我们可以使用javascript动态地添加file元素到表单，然后在服务器端处理这些file

效果图如下:

页面代码MutlileFileUpload.aspx如下:

view plaincopy to clipboardprint?
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MutlileFileUpload.aspx.cs" Inherits="MutlileFileUpload"%>

<!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>
    <title>多文件上传到服务器Demo</title>
    <link href="css/writemail.css" mce_href="css/writemail.css" rel="stylesheet" type="text/css" />
    <mce:script type="text/javascript"></mce:script>
</head>
<body>
    <form id="form1" runat="server" >
    <div>
        <a id="addAttach_a" onclick="return addAttach(false);" href="#" mce_href="#" class="add_attach">添加附件</a>
        <div id="files"></div>
        <asp:Button ID="btnSend" runat="server" Text="发送" onclick="btnSend_Click" />
    </div>
    </form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MutlileFileUpload.aspx.cs" Inherits="MutlileFileUpload"%>

<!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>
    <title>多文件上传到服务器Demo</title>
    <link href="css/writemail.css" mce_href="css/writemail.css" rel="stylesheet" type="text/css" />
    <mce:script type="text/javascript"><!--
        var MAXFILES = 5;
        //文件计数器
        var fileCount = 0;
        function addAttach(noAlert) {
            if (fileCount >= MAXFILES && !noAlert) {
                alert("最多只能添加" + MAXFILES + "个附件！");
                return;
            }

            var fileSectionDiv = document.getElementById("files");
            var fileItemDiv = document.createElement("div");
            fileCount++;

var content = "<input type='file' onchange='return addAttach(true);' name='fileUpload'" + fileCount + "> <a href="#" mce_href="#" onclick='return delAttach(/"" + fileCount + "/")' class='delete_attach' >移除附件</a>";

            fileItemDiv.id = "fileItemDiv" + fileCount;
            fileItemDiv.innerHTML = content;
            fileSectionDiv.appendChild(fileItemDiv);

return false;
}

        function delAttach(fileIndex) {
            var fileSectionDiv = document.getElementById("files");
            var fileItemDiv = document.getElementById("fileItemDiv" + fileIndex);
            fileSectionDiv.removeChild(fileItemDiv);
            return false;
        }

// --></mce:script>
</head>
<body>
    <form id="form1" runat="server" >
    <div>
        <a id="addAttach_a" onclick="return addAttach(false);" href="#" mce_href="#" class="add_attach">添加附件</a>
        <div id="files"></div>
        <asp:Button ID="btnSend" runat="server" Text="发送" onclick="btnSend_Click" />
    </div>
    </form>
</body>
</html>

样式表WriteMail.css代码如下:

view plaincopy to clipboardprint?
.delete_attach {
    PADDING-LEFT: 18px; BACKGROUND: url(../images/deleteattch_icon.gif) no-repeat left top; MARGIN-LEFT: 7px; WIDTH: 90px; COLOR: #002f76
}

.add_attach {
    PADDING-LEFT: 22px; BACKGROUND: url(../images/attach.gif) no-repeat left center; WIDTH: 90px; COLOR: #002f76
}
.delete_attach {
PADDING-LEFT: 18px; BACKGROUND: url(../images/deleteattch_icon.gif) no-repeat left top; MARGIN-LEFT: 7px; WIDTH: 90px; COLOR: #002f76
}

.add_attach {
PADDING-LEFT: 22px; BACKGROUND: url(../images/attach.gif) no-repeat left center; WIDTH: 90px; COLOR: #002f76
}

后台代码MutlileFileUpload.aspx.cs如下:

view plaincopy to clipboardprint?
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

public partial class MutlileFileUpload : System.Web.UI.Page
{
    protected void Page_Load(object sender, System.EventArgs e)
    {
        //告诉表单如何格式化文件信息
        Page.Form.Enctype = "multipart/form-data";
    }

    protected void btnSend_Click(object sender, EventArgs e)
    {
        for (int index = 0; index < Request.Files.Count; index++)
        {
            if (!string.IsNullOrEmpty(Request.Files[index].FileName))
            {
                Request.Files[index].SaveAs(Path.Combine(Server.MapPath("Files"), System.IO.Path.GetFileName(Request.Files[index].FileName)));
            }
        }
    }
}