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












1 comment:

  1. 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