In earlier versions of Visual Studio it was very difficult to do
multiple file uploads because we had to write many lines of code but in
ASP.Net 4.5 Visual Studio provides the feature to enable the upload of
multiple files at a time without writing much code. So let us learn
about the ASP.Net 4.5 File Upload control step-by-step.
File Upload Control
The
File Upload control displays a text box control and a browse button
that enables users to select a file to upload to the server.
The following are some of the common properties of the ASP.Net File Upload control:
- AllowMultiple: Gets or sets a true or false value that specifies whether multiple files can be selected for upload, if true then it allows multiple file uploads, the default is false.
- FileBytes: Gets an array of the bytes in a file that is specified using a System.Web.UI.WebControls.FileUpload control
- FileContent: Gets a System.IO.Stream object that points to a file to upload using the System.Web.UI.WebControls.FileUpload control.
- FileName: Gets the name of a file on a client to upload using the System.Web.UI.WebControls.FileUpload control.
- HasFile: Gets a value indicating whether the System.Web.UI.WebControls.FileUpload control contains a file.
- HasFiles: Gets a value indicating whether the System.Web.UI.WebControls.FileUpload control contains a files.
- PostedFile: Gets the underlying System.Web.HttpPostedFile object for a file that is uploaded using the System.Web.UI.WebControls.FileUpload control.
- PostedFiles: Gets the collection of uploaded files.
- AddAttributesToRender: Adds the HTML attributes and styles of a System.Web.UI.WebControls.FileUpload control to render to the specified System.Web.UI.HtmlTextWriter object.
- OnPreRender: Raises the System.Web.UI.Control.PreRender event for the System.Web.UI.WebControls.FileUpload control.
- Render: Sends the System.Web.UI.WebControls.FileUpload control content to the specified System.Web.UI.HtmlTextWriter object, that writes the content to render on the client.
- SaveAs: Saves the contents of an uploaded file to a specified path on the Web server.
- "Start" - "All Programs" - "Microsoft Visual Studio 2010".
- "File" - "New WebSite" - "C#" - "Empty WebSite" (to avoid adding a master page).
- Provide the web site a name such as "UsingMultiUpload" or another as you wish and specify the location.
- Then right-click on Solution Explorer and select "Add New Item" and Add Web Form.
- Drag and drop one Button, a Label and a FileUploader control onto the <form> section of the Default.aspx page.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Article by Vithal Wadje</title> </head> <body bgcolor="gray"> <form id="form1" runat="server"> <br /> <br /> <div style="color: white"> <h4>Article for www.compilemode.com</h4> <table> <tr> <td>Select Files</td> <td> <asp:FileUpload ID="FileUpload1" runat="server" /> </td> <td></td> <td> <asp:Button ID="Button1" runat="server" Text="Uplaod" OnClick="Button1_Click" /> </td> </tr> </table> </div> <asp:Label ID="Label1" runat="server" Visible="false" ForeColor="LawnGreen" Text="Label"></asp:Label> </form> </body> </html>
Now set the File Upload control AllowMultiple to true as in the following:
<asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="true" />
Create the folder in Solution Explorer by right-clicking to save uploaded Multiple files as in the following:
Write the following code for the Upload button click event to Upload and save files on the server folder as in the following:
protected void Button1_Click(object sender, EventArgs e) { foreach (HttpPostedFile htfiles in FileUpload1.PostedFiles) { getFileName = Path.GetFileName(htfiles.FileName); htfiles.SaveAs(Server.MapPath("~/UploadedFiles/"+getFileName)); } Label1.Visible = true; Label1.Text = FileUpload1.PostedFiles.Count.ToString() + " Files Uploaded Successfully"; }
The entire code of the default.aspx.cs page will look as follows:
using System; using System.Web; using System.IO; public partial class _Default : System.Web.UI.Page { string getFileName; protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { foreach (HttpPostedFile htfiles in FileUpload1.PostedFiles) { getFileName = Path.GetFileName(htfiles.FileName); htfiles.SaveAs(Server.MapPath("~/UploadedFiles/"+getFileName)); } Label1.Visible = true; Label1.Text = FileUpload1.PostedFiles.Count.ToString() + " Files Uploaded Successfully"; } }
Now run the application. The UI will look such as follows:
Now click on the Browse Button and select multiple files by Pressing the Ctrl button of the keybord as in the following:
Now click on Open after selecting the files then the File Upload
control saves the comma (,) separated file paths as in the following:
Now click on the Upload button. The following message is shown as I have set to a label control as in the following:
Now refresh the folder we created to save the files to, it will look such as follows:
Now you have seen how to upload multiple files with a minimal amount of code and effort.
Note
- Do a proper validation such as if it has a file or not of the File Upload control when implementing.
- For more details and explanation, download the Uploaded Zip file UploadMultipleFiles.zip
Summary
From all the preceding examples you have learned how to Upload
multiple files. I hope this article is useful for all readers, if you
have a suggestion then please contact me.
Post a Comment