Post
Ask Question

Previewing Image in ASP.NET Image Control

If you want to upload an image through a file upload control in ASP.NET C# and want to preview of image with in upload time, write simple code to get out of here.
 
You can use given below function for it: 
  1. <script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>  
  2.    <script type="text/javascript">  
  3.       function ShowpImage(input) {  
  4.          if (input.files && input.files[0]) {  
  5.             var reader = new FileReader();  
  6.             reader.onload = function (e) {  
  7.                $('#ImgShow').attr('src', e.target.result);  
  8.             }  
  9.             reader.readAsDataURL(input.files[0]);  
  10.          }  
  11.       }  
  12.    </script>  
Now Full Code, 
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4.    <head runat="server">  
  5.       <title>  
  6.          Show image preview on File upload Control
  7.       </title>  
  8.       <script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>  
  9.       <script type="text/javascript">  
  10.          function ShowpImage(input) {  
  11.             if (input.files && input.files[0]) {  
  12.                var reader = new FileReader();  
  13.                reader.onload = function (e) {  
  14.                   $('#ImgShow').attr('src', e.target.result);  
  15.                }  
  16.                reader.readAsDataURL(input.files[0]);  
  17.             }  
  18.          }  
  19.       </script>  
  20.    </head>  
  21.    <body>  
  22.       <form id="form1" runat="server">  
  23.          <div>  
  24.             <fieldset style="width: 250px;">  
  25.                <legend>Show image preview before image upload</legend>  
  26.                <div align="center">  
  27.                   <asp:Image ID="ImgShow" Height="150px" Width="150px" runat="server" /><br />  
  28.                   <asp:FileUpload ID="flupImage" runat="server" onchange="ShowpImage(this);" />  
  29.                </div>  
  30.             </fieldset>  
  31.          </div>  
  32.       </form>  
  33.    </body>  
  34. </html>  
Output 1

Now Click on Browse Button and select a image and click on open button.

Output 2

Blog source-dotnetdarpan.blogspot.in
Next Recommended Reading How To Crop Image And Save Image In ASP.NET Using jQuery