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

                Download Coding  


HTML Coding

<html xmlns="">
<head runat="server">
<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 != '') {


    <form id="ImageUploadform1" runat="server">
<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"/>


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


Post a Comment