Asp.net 多个文件上传

Asp.net Multiple File Uploads

我有一个 ASP.net 网络应用程序,它保存在会话中输入的所有详细信息,并在最后发送一封电子邮件,其中包含所有详细信息,包括上传文件的附件(目前所有这些工作正常)。

我遇到的问题是需要对文件上传页面进行更改。我希望现在能够上传多个文档,但是是分开的,所以基本上用户找到要上传的文件然后单击 'Add' 按钮。然后应该清除上传文件字段,并且 table 应该用上传的文件填充,每个上传的文件都有一个 'Remove/Delete' 按钮。

应在此 table 中显示的详细信息是:

正如我所说,我可以使用后面的代码上传单个文件,但我不知道如何实现我想要的,以便所有上传的文档都在我的电子邮件中发送。

当前HTML

<div class="form-group">
     <div class="col-sm-offset-2 col-sm-5">
          <div class="fileinput fileinput-new input-group" data-provides="fileinput">
               <div class="form-control" data-trigger="fileinput" style="background-color: #ededed">
                    <span class="fileinput-filename"></span>
               </div>
               <span class="input-group-addon btn btn-default btn-file">
                    <span class="fileinput-new">
                         <span class="glyphicon glyphicon-folder-open" title="Click to select a file."></span>
                    </span>
                    <span class="fileinput-exists">
                         <span class="glyphicon glyphicon-folder-open" title="Click to change the selected file."></span>
                    </span>
                    <input type="file" name="..." id="fuAttachment" runat="server" />
               </span>
          </div>
     </div>
     <div class="col-sm-3">
          <asp:DropDownList ID="Step03WebTypeDD" runat="server" class="form-control">
               <asp:ListItem Value="- - Please select - -">- - Please select - -</asp:ListItem>
               <asp:ListItem Value="Requirements">Requirements</asp:ListItem>
               <asp:ListItem Value="Functional specification">Functional specification</asp:ListItem>
               <asp:ListItem Value="Page Content">Page Content</asp:ListItem>
               <asp:ListItem Value="Page Designs">Page Designs</asp:ListItem>
               <asp:ListItem Value="Page Designs">Other</asp:ListItem>
          </asp:DropDownList>
     </div>
     <div class="col-sm-1">                                    
          <asp:LinkButton ID="UploadAddButton" runat="server" OnClick="Step05UploadAddButton_Click" CssClass="btn btn-success pull-right" ToolTip="Click to upload the file.">
               <span class="glyphicon glyphicon-plus"></span> Add
          </asp:LinkButton>
     </div>
</div>

当前代码隐藏

protected void Step05UploadAddButton_Click(object sender, EventArgs e)
{
     var file = fuAttachment.PostedFile;
     if (file != null && fuAttachment.PostedFile.FileName != "")
     {
          var content = new byte[file.ContentLength];
          file.InputStream.Read(content, 0, content.Length);
          Session["FileContent"] = content;
          Session["FileContentType"] = file.ContentType;
          Session["File"] = fuAttachment.PostedFile.FileName;
          Session["AttachmentProvided"] = "Yes";
     }
     else
     {
          Session["FileContent"] = "";
          Session["FileContentType"] = "";
          Session["File"] = "";
          Session["AttachmentProvided"] = "No";
     }
}

我后面的代码没有捕获所选的选项,但我需要捕获它才能在我的确认页面上显示它(HTML 如下所示)

<div class="form-group">
        <asp:Label ID="Label6" class="col-xs-6 col-sm-3 control-label" runat="server" Text="Attachment provided:"></asp:Label>
        <div class="col-xs-6 col-sm-9 form-control-static">
            <% if (Session["AttachmentProvided"] == "Yes")
            {%>
                Yes (<%=Session["File"] %>)
            <%}
            else
            { %>
                No
            <%} %>
        </div>
    </div>

您可以使用 JavaScript 向 DOM 添加额外的 <input type="file" /> 元素,并使用 Request.Files 引用所有文件,如 [=13] 中所述=].来自 MSDN 的示例:

Files = Request.Files; // Load File collection into HttpFileCollection variable.
arr1 = Files.AllKeys;  // This will get names of all files into a string array.
for (loop1 = 0; loop1 < arr1.Length; loop1++) 
{
    Response.Write("File: " + Server.HtmlEncode(arr1[loop1]) + "<br />");
    Response.Write("  size = " + Files[loop1].ContentLength + "<br />");
    Response.Write("  content type = " + Files[loop1].ContentType + "<br />");
}