Asp.net Mehrere Datei-Uploads

Question

Ich habe eine ASP.net Web-Anwendung, die alle in der Sitzung eingegebenen Daten speichert und am Ende sendet eine E-Mail mit allen Details einschließlich einer Anlage der hochgeladenen Datei (all dies funktioniert derzeit gut).

Das Problem, das ich habe, ist, dass eine Änderung der Datei Upload-Seite erforderlich ist. Ich möchte nun mehrere Dokumente hochladen können, aber separat, so dass der Benutzer die Datei zum Hochladen findet und dann auf die Schaltfläche "Hinzufügen" klickt. Das Upload-Dateifeld sollte dann gelöscht werden und eine Tabelle sollte mit den hochgeladenen Datei (en) mit einer "Entfernen/Löschen" -Schaltfläche für jede hochgeladene Datei gefüllt werden.

Die Details, die in dieser Tabelle angezeigt werden sollen, sind:

• Dateiname
• Option ausgewählt aus der neuen Drop-Down-Liste
• Schaltfläche Entfernen

Als ich sagte, ich Single Datei-Upload arbeitet mit dem Code hinter, aber ich habe keine Ahnung, wie zu implementieren, was ich bin, so dass alle hochgeladenen Dokumente in meiner E-Mail gesendet werden.

Aktuelle 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> 

aktuellen Code Hinter

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"; 
    } 
} 

Mein Code hinter erfasst nicht die gewählte Option, müssen aber so kann ich es auf meiner Bestätigungsseite angezeigt werden (HTML unten gezeigt)

<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> 

Answer 1

Sie können JavaScript verwenden, um dem DOM zusätzliche Elemente <input type="file" /> hinzuzufügen, und beziehen sich allgemein auf alle Dateien, die Request.Files verwenden, wie unter MSDN erwähnt. Eine aus MSDN entnommene Stichprobe:

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 />"); 
}