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

04:08:00  , , , ,  1 comment

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










1 comment:

  1. Unknown23 May 2018 at 23:57

    but it is not working for multiple file uploader controls. when I upload from first uploader then remaining images are automatic filled. please share any solution. ASAP

    ReplyDelete