Multiple Image Upload in Single Button Click Using Asp.Net C#

Multiple Image Upload

Multiple Image Upload In Button Click Using  For Loop  In Asp.Net C#.


http://dotnetdrizzles.blogspot.in/2016/01/multiple-files-or-image-upload-in.html



DEMO



HTML Coding

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
   
        <asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="True" />


       <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Upload" />


      <asp:Label ID="lblMessage" runat="server" ForeColor="#FF3300" Text="Label"></asp:Label>

   
    </div>
    </form>
</body>
</html>

                            
                              C# Coding

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

public partial class ImageMultipleUpload : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
      
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        
        HttpFileCollection imageCollection = Request.Files;

        for (int i = 0; i < imageCollection.Count; i++)
        {
          
            HttpPostedFile uploadImages = imageCollection[i];

            string fileName = Path.GetFileName(uploadImages.FileName);

              uploadImages.SaveAs(Server.MapPath("~/images/") + fileName);

                lblMessage.Text = "Images Uploaded";
                        
        }
    }
}


First  Create New Web Form - Add FileUpload & 

Buttton & Label Controls

FileUploadControl - AllowMultiple=True.





Html Coding For All Controls






Next - Create Images Folders  - Add Coding to For Loop 






Next - Run[F5] the Program - Upload Multiple Images












Image Upload Without Submit Button OR Page Refresh Using JQuery in Asp.Net C#

Image Upload Without Submit Button OR Page Refresh Using JQuery

Image Upload In Server Without Click Button or Refresh Page  Display The Image Display in Image Control Using JQuery In Asp.Net C#.

Multiple Image Upload
Image Update in Gridview   
Show Image Preview
Restrict Upload File Size
Image Insert Bind  GridView
Without Database Upload Image Show

DownLoad JQuery Plugin

https://app.box.com/s/svb98ijjeeepg6nuxjh5


                Download Coding  
                  
                                                                     Download

                                    DEMO





HTML Coding

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
  
<script src="JQS/jquery-1.4.1.min.js" type="text/javascript"></script>
      <script lang="javascript" type="text/javascript">

        function UploadFile() {
            var value = $("#FileUpload1").val();
            if (value != '') {
                $("#ImageUploadform1").submit();
            }
        };

</script>

</head>
<body>
    <form id="ImageUploadform1" runat="server">
    <div>
<asp:FileUpload ID="FileUpload1" runat="server" 
ClientIDMode="Static" onchange="UploadFile()" />    
       
         <asp:Label ID="Label1" runat="server"></asp:Label> 
              
  <asp:Image ID="Image1" runat="server" Height="150px" Width="250px"/>

</div>
   
    </form>
</body>
</html>

C# Coding

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

public partial class ImageDisplayWithoutButton : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
       
 if (IsPostBack && FileUpload1.PostedFile != null)
        {
                       
            string name =                   Path.GetFileName(FileUpload1.PostedFile.FileName);


              FileUpload1.SaveAs(Server.MapPath("~/" + name));


                 Image1.ImageUrl = FileUpload1.FileName;
             
                    Label1.Text = FileUpload1.FileName;



        }
    }
}



First Create New Web Form - Add  File Upload  & Label & Image Controls 





Next - Add JQuery PlugIns - Write Scripts 







Next  - Code Behind Add  NameSpace - Add Coding To Page_Load






Next - Run[F5] Program - Upload Images Display Without Button Click












Button Click Event Inside GridView Using Asp.Net C#

Button Click Event Inside GridView


Get the Values From Runtime Gridview  Pass Next  Form Use to Button  in This Method


               C# Coding


   protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
    {

         Button btn = (Button)sender;

        GridViewRow gr = (GridViewRow)btn.NamingContainer;

        Label sendermail = (Label)gr.FindControl("Label10");

        TextBox name = (TextBox)gr.FindControl("txtname");

        TextBox mobile = (TextBox)gr.FindControl("txtmobile");

        TextBox mail = (TextBox)gr.FindControl("txtemail");

        TextBox message = (TextBox)gr.FindControl("txtmessage");


}



Image - Display Uploaded Image After I Click the Upload Button Without Data Base in Asp.Net C#

Display Uploaded Image After I Click the Upload Button 

Image Upload FileUpload Control Tool After Click Upload Button  Display Image Without Savt To DataBase  Using In Asp.Net C#.

Image Upload Without Button Click 
Corp Image Using JQuery
Multiple Image Upload
Image Update in Gridview   
Show Image Preview
Restrict Upload File Size
Image Insert Bind  GridView
Without Database Upload Image Show
                               

                               Download Coding  
                  
                                                                     Download

                                    DEMO



Html Coding

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
              
       <asp:FileUpload ID="FileUpload1" runat="server" />

        <asp:Button ID="btnUpload" 
            runat="server" Text="Upload" OnClick="Button1_Click" />
        
                <asp:Image ID="Image1" runat="server" Height="250px" Width="300px" />

    </div>
    </form>
</body>
</html>


C# Coding

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using System.IO;

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

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
                   
          string  name = Path.GetFileName(FileUpload1.PostedFile.FileName);

            FileUpload1.SaveAs(Server.MapPath("~/" + name));

            Image1.ImageUrl = FileUpload1.FileName;
       

    }
}



First Create - New Webform - Add Image,Button FileUpload Controls





Next - Upload Button Click -  Write Coding






Html Coding for Controls






Next - Run[F5] the Program