ARTICLE

Multiple Image Upload in ASP.NET

Posted by Purushottam Rathore Articles | ASP.NET Programming May 12, 2009
In this article, I am going to discuss how to upload multiple images in ASP.NET simultaneously.
Reader Level:
Download Files:
 

Multiple image upload:

There are some simple steps to understand this application.

Step 1:
Create a new ASP.NET application.


Step 2:
Write the following inline code on Default.aspx page.
 
<%
@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
    <
title>WebForm1</title>
</
head>
<
body>
<
form id="Form1" method="post" runat="server" style="width: 530px;">
    <
fieldset>
    <
legend>Upload Multiple Photos</legend>
    <
div id="div1" runat="server">
        <
input type="file" size="65" runat="server" id="FileUpload1">
        <
input type="file" size="65" runat="server" id="FileUpload2">
        <
input type="file" size="65" runat="server" id="FileUpload3">
        <
input type="file" size="65" runat="server" id="FileUpload4">
        <
input type="file" size="65" runat="server" id="FileUpload5">
    </
div>
    <
br />
    <
div id="div2" runat="server" visible="false">
        <
input type="file" size="65" runat="server" id="FileUpload6">
        <
input type="file" size="65" runat="server" id="FileUpload7">
        <
input type="file" size="65" runat="server" id="FileUpload8">
        <
input type="file" size="65" runat="server" id="FileUpload9">
        <
input type="file" size="65" runat="server" id="FileUpload10">
    </
div>
    <
br />
    <
asp:Button ID="Button1" runat="server" Text="Upload" OnClick="Button1_Click" />
    <
asp:Button ID="ButtonMore" runat="server" Text="Add 10 Photos" OnClick="ButtonMore_Click" />
    </
fieldset>
    <
br />

    <
div id="div5" runat="server" visible="false">
    <
fieldset>
    <
legend>Show Photos</legend>
    <
div id="div3" runat="server">
        <
asp:Image ID="Image1" runat="server" Height="100" Width="100" ImageUrl="~/Image.gif" />
        <
asp:Image ID="Image2" runat="server" Height="100" Width="100" ImageUrl="~/Image.gif" />
        <
asp:Image ID="Image3" runat="server" Height="100" Width="100" ImageUrl="~/Image.gif" />
        <
asp:Image ID="Image4" runat="server" Height="100" Width="100" ImageUrl="~/Image.gif" />
        <
asp:Image ID="Image5" runat="server" Height="100" Width="100" ImageUrl="~/Image.gif" />
    </
div>
    <
br />
    <
div id="div4" runat="server" visible="false">
        <
asp:Image ID="Image6" runat="server" Height="100" Width="100" ImageUrl="~/Image.gif" />
        <
asp:Image ID="Image7" runat="server" Height="100" Width="100" ImageUrl="~/Image.gif" />
        <
asp:Image ID="Image8" runat="server" Height="100" Width="100" ImageUrl="~/Image.gif" />
        <
asp:Image ID="Image9" runat="server" Height="100" Width="100" ImageUrl="~/Image.gif" />
        <
asp:Image ID="Image10" runat="server" Height="100" Width="100" ImageUrl="~/Image.gif" />
    </
div>
    </
fieldset>
    </
div>
</
form>
</
body>
</
html>


Step 3:
Now add the following namespace on the Default.aspx.cs page
 

using System.IO;


Step 4: 
Write the following line of code on the Default.aspx.cs

using
System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO;

public partial class _Default : System.Web.UI.Page
{
    protected
void Page_Load(object sender, EventArgs e)
    {
    }

    protected
void Button1_Click(object sender, EventArgs e)
    {
        div5.Visible = true;
        HttpFileCollection uploadFilCol = Request.Files;
        for (int i = 0; i < uploadFilCol.Count; i++)
        {
            HttpPostedFile file = uploadFilCol[i];
            string fileExt = Path.GetExtension(file.FileName).ToLower();
            string fileName = Path.GetFileName(file.FileName);
            if (fileName != string.Empty)
            {
                try
               
{
                    if (fileExt == ".jpg" || fileExt == ".gif" || fileExt == ".bmp" || fileExt == ".jpeg" || fileExt == ".png")
                   
{
                        file.SaveAs(Server.MapPath("~/Images/") + fileName);
                        if (i == 0)
                        {
                            Image1.ImageUrl = "~/Images/" + fileName;
                        }
                        if (i == 1)
                        {
                            Image2.ImageUrl = "~/Images/" + fileName;
                        }
                        if (i == 2)
                        {
                            Image3.ImageUrl = "~/Images/" + fileName;
                        }
                        if (i == 3)
                        {
                            Image4.ImageUrl = "~/Images/" + fileName;
                        }
                        if (i == 4)
                        {
                            Image5.ImageUrl = "~/Images/" + fileName;
                        }
                        if (i == 5)
                        {
                            Image6.ImageUrl = "~/Images/" + fileName;
                        }
                        if (i == 6)
                        {
                            Image7.ImageUrl = "~/Images/" + fileName;
                        }
                        if (i == 7)
                        {
                            Image8.ImageUrl = "~/Images/" + fileName;
                        }
                        if (i == 8)
                        {
                            Image9.ImageUrl = "~/Images/" + fileName;
                        }
                        if (i == 9)
                        {
                            Image10.ImageUrl = "~/Images/" + fileName;
                        }
                    }
                }
                catch (Exception ex)
                {
                    throw ex;
                }
            }
        }
    }

    protected
void ButtonMore_Click(object sender, EventArgs e)
    {
        if (ButtonMore.Text == "Only five")
        {
            div2.Visible = false
;
            ButtonMore.Text = "Add 10 Photos";
            div4.Visible = false;
        }

        else if (ButtonMore.Text == "Add 10 Photos")
        {
            div2.Visible = true
;
            ButtonMore.Text = "Only five";
            div4.Visible = true;
        }
    }
}

Step 5: Now run the application. You will get the following output.

Image1.JPG 

Figure 1:

Step 6:
Now click on Browse button and select Images which you want to upload.
 

Image2.JPG 

Figure 2:


Step7:
Now click on the upload button.
 

Image3.JPG 

Figure 3:

Step 8: And if you want to upload more image then click on 'Add 10 Photos' buttons.
 

Image4.JPG 

Figure 4:


Step 9:
Repeat step 6 and 7.


Step 10:
Finally go to download files to understand more about this application.

Article Extensions
Contents added by udomsak uttamamunee on Jan 19, 2013
58
Contents added by joe vinioth on Sep 22, 2012
COMMENT USING