Saturday, June 28, 2014

How to Upload Multiple Files using HTML 5 in asp.net web form application

Note:This article is featured as the article of the day at Asp.Net Community.

Introduction:
Article discuss about how to upload multiple file in asp.net web form application using html5.

Procedure:
1) Create a new ASP.NET Empty Web Application project as shown below














2) Add new web form and named it Demo.aspx.

3) Now Replace the body of the Demo aspx page with below code

<body>
    <form id="form1" runat="server">
    <div>
 
        <asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="true" />&nbsp;
        <asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="Upload" />
        <br />
        <br />
        <asp:Label ID="lblOutput" runat="server" ForeColor="#00CC00"></asp:Label>
 
    </div>
    </form>
</body>

4)Now in order to save uploaded images create a folder named "Images" under the root of the project as shown below






















5) Now add the following code for the upload button click event
 protected void btnUpload_Click(object sender, EventArgs e)
        {
            if(FileUpload1.HasFiles)
            {
                string path = Server.MapPath("~/Images/");
                foreach(HttpPostedFile file in FileUpload1.PostedFiles)
                {
                    try
                    {
                        file.SaveAs(Path.Combine(path, file.FileName));
                        lblOutput.Text += "File Uploaded is : " + file.FileName+"<br />";
                    }
                    catch(Exception ex){
                        lblOutput.Text="Error happens while uploading your file "+ex.Message;
                        return;
                    }
                }
            }
        }
6) Now build and run the page.













7) Now click show all files in the solution explorer in order to view all uploaded files in Images folder as shown below:-






















Have a great Coding.

No comments:

Post a Comment